I have list of descriptions and after remove one of them, I'd like to remove last element from div, not refreshing site. I don't know javascript in fact, so I'd like to ask how should my destroy.js.erb looks like? I can refresh whole class "descriptions" using
$('.descriptions').load(location.href + " .descriptions");
but I'm interested, if there is way to remove only last element.
<div class="descriptions">
<%= render #descriptions %>
</div>
//_description.html.erb
<div class="description-field">
<%= #description.text %>
</div>
Thank you for any help
<div class="parent">
<div class="child">
Item 1
</div>
<div class="child">
Item 2
</div>
<div class="child">
Item 3
</div>
</div>
The following line of jQuery would delete "Item 3."
$('.parent').children().last().remove();
Use css selector :last-child to remove it (found here). Then use jQuery to remove last element.
$(".yourdiv :last-child").remove();
Here is jsFiddle example:
html:
<div>
<p> Hello </p>
<p> World </p>
<p> last element </p>
</div>
JavaScript:
$("div :last-child").remove();
Use this if you want to remove the last div:
$("div:last").remove();
Use this if you want to remove the last sibling of some div with id "#mydiv"
$('#mydiv:last-child')
<div id="parent">
<div id="child">
Item 1
</div>
<div id="child">
Item 2
</div>
<div id="child">
Item 3
</div>
</div>
The following is a JQuery code that removes the last child item 3
$("#child").remove();
or you can also use
$("#child").css({"display": "none"});
Related
this is the object I'm trying to select: $x('//div[contains(#class,"react-select__value-container")]')
** There are 10 of these **
this is the grandparent object: $x('//div[#class="chart-option"]/label[.="Layer"]/..') ** There is only one of these **
the parent is a simple //div[contains(#class, "react-select")]
So the code looks like this:
<div class="chart-option">
<label>Layer</label>
<div class="react-select css-2b097c-container">
<div class="react-select__value-container css-1hwfws3">
So I need the "value-container" who's grandparent has the child /label[.="Layer"]
But I can't for the life of me get the ordering right and relative syntax to get it. Is there a good tutorial for this? Any help is appreciated.
Try this xpath:
//div[#class="chart-option"][label="Layer"]/div[div[contains(#class,"react-select__value-container")]]
Explanation
//div[#class="chart-option"][label="Layer"]
Looking anywhere in the document, select div tags such that (1) the class is chart-option and (2) there is a child tag called label with the value Layer.
/div[div[contains(#class,"react-select__value-container")]]
Looking at each node in the previous result set above, select all child div tags such that that child div tag itself has a div tag that matches the class pattern you have given. (In other words, match based on the grandchild's class, but ultimately select the child div tag.)
Test Cases
Here are some more test cases that I used. You can test using an online xpath testing tool.
<div>
<div class="chart-option">
<label>nope</label>
<div class="react-select css-WRONG-container">
<div class="react-select__value-container css-WRONG">
</div>
</div>
</div>
<div class="chart-option">
<label>Layer</label>
<div class="react-select css-CORRECT-container">
<div class="react-select__value-container css-CORRECT">
</div>
</div>
</div>
<div class="chart-option">
<label>Not Layer</label>
<div class="react-select css-WRONG-container">
<div class="react-select__value-container css-WRONG">
</div>
</div>
</div>
<label>Layer</label>
<div class="react-select css-WRONG-container">
<div class="react-select__value-container css-WRONG">
</div>
</div>
<div class="chart-option">
<label>Layer</label>
<div class="WRONG-AGAIN">
<div class="WRONG-AGAIN">
</div>
</div>
</div>
</div>
I'm learning Javascript and jQuery and I'm stuck at this one problem. Let's say my code looks like this:
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Now, if i click one of the div's, i want the other ones to disappear.
I know, I could create 4 functions for each one of them with on.click hey and display none with how , are and you. But is there a easier way? I bet there is, with classes maybe?
Thanks for responding!
Use siblings to get reference to its "brothers".
Given a jQuery object that represents a set of DOM elements, the .siblings() method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements.
$('div').click(function(){
$(this).siblings().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Or you can hide all the other div which not the clicked element using not
Remove elements from the set of matched elements.
$('div').click(function() {
$('div').not(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
You can just hide siblings() of clicked div.
$('div').click(function() {
$(this).siblings().fadeOut()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey">hey</div>
<div id="how">how</div>
<div id="are">are</div>
<div id="you">you</div>
Yeah there are some easier ways and I could tell a one from it,
Set a common class to all the elements that you are gonna target,
<div class="clickable" id="hey"> hey </div>
<div class="clickable" id="how"> how </div>
<div class="clickable" id="are"> are </div>
<div class="clickable" id="you"> you </div>
And you have to bind a single click event by using a class selector,
$(".clickable").on("click", function(){ });
Now use the .siblings() functions to hide the required elements,
$(".clickable").on("click", function(){
$(this).siblings(".clickable").hide();
});
But using a toggle instead of hide would sounds logical,
$(".clickable").on("click", function(){
$(this).siblings(".clickable").toggle();
});
Since you can do the same operation over all the elements.
You can use not to avoid element and this will indicate current instance.
$(document).ready(function(){
$("div").on("click",function(){
$("div").not(this).hide("slow");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Assign a class to each of the elements:
<div id="hey" class='sth'> hey </div>
<div id="how" class='sth'> how </div>
<div id="are" class='sth'> are </div>
<div id="you"class='sth' > you </div>
And write a js function onclick.
Remove class 'sth' from 'this' element in this function
Hide all elements with class 'sth' $('.sth').hide();
For this example - you don't need to add any further selectors to target the div's although in reality - this solution wwould cause all divs on the page to be affectecd - adding classes would be my actual suggestion: - but this works for this example. Click a div and all divs are hidden then the clicked one is shown. I also added a reset button to allow all divs to reappear.
$('div').click(function(){
$('div').hide();
$(this).show();
});
$('#reset').click(function(){
$('div').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
<hr/>
<button type="button" id="reset">Reset</button>
$(document).ready(function(){
$("div").on("click",function(){
$("div").not(this).toggle("slow");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
This is a sample code of my scenario. I have some elements that are loading inside a container div using PHP from a MYSQL table.
<div id="itemContainer">
<div class="item">
test
</div>
<div class="item">
test
</div>
<div class="item">
test
</div>
<div class="item">
test
</div>
<div class="item">
test
</div>
<div class="item">
test
</div>
</div>
so their may be 10 or 12 items but I need only 4 items to be display at once. so I tried to select all the items after the fourth item. The way I tried has some problems so I need your help.
$(document).ready(function() {
var items = $('#weekly_best_selling').children('.itemContainer').length;
if (items > 6) {
$('#weekly_best_selling').children('.itemContainer').nextAll('.itemContainer').css( "background-color", "red" );
}
});
http://jsfiddle.net/yasithao3/j2zyhmr3/
you can use :gt selector to target elements having index greater than the one passed as argument in it. also note that :gt selector has 0 based index. Use:
$('#itemContainer .item:gt(3)').hide();//hide items having index greater than 3
Working Demo
$('.item:gt(3)').hide()
Use jQuery's :gt() selector.
If I have this list...
<div class="class1">
<div class="class2">
<div class="class3">
<span class="class4">test</span>
</div>
</div>
</div>
<div class="class1">
<div class="class2">
<div class="class3">
<span class="class4">test</span>
</div>
</div>
</div>
<div class="class1">
<div class="class2">
<div class="class3">
<span class="class4">test</span> <--- Add class5 here in addition to class4
</div>
</div>
</div>
How do I add class2 in the correct spots? I need it to add to the last span every time even though the number of spans will change. I have something like this, but it doesn't account for the number of items in the list.
jQuery(".class4)").addclass("class5");
Is there anyway to do a "last" class4 scenario? Any help would be appreciated.
Use
jQuery('.class4').last().addClass('class5');
Use last:
jQuery('.class4').last().addClass('class5');
You can use :last
http://api.jquery.com/last-selector/
$(".class4:last").addClass("class5");
Use the last selector of jQuery
http://api.jquery.com/last-selector/
$(".class4:last").addClass("class5")
There is a stray closing parenthesis after .class4 in your selector:
jQuery(".class4").addclass("class5");
This still does not work because addClass is case sensitive[1]:
jQuery(".class4").addClass("class5");
But to target only the last .class4 you can use the :last pseudo-selector[2]...
jQuery(".class4:last").addClass("class5");
... or the .last() jQuery method[3]:
jQuery(".class4").last().addClass("class5");
[1] http://api.jquery.com/addClass/
[2] http://api.jquery.com/last-selector/
[3] http://api.jquery.com/last/
Let's say I have the following.
<div class="foo">
<div>
some text
<div class="bar">
</div>
</div>
</div>
<div class="foo">
<div>
some text
<div class="bar">
some text
</div>
</div>
</div>
I want return all the divs of class "foo" that have "some text" inside the div class "bar." So the second would be returned, but not the second. How can I do that?
Try this
$("div.bar:contains('some text')").parents(".foo")
This will do it
$('.foo:has(.bar:not(:empty))')
Make sure there are no characters inside the .bar, even spaces or newlines.
http://jsfiddle.net/Nk4FB/