Geek Answers Handbook

"nearest ()" does not work in a different state

I made simple functionality for the select (add check) div on the 1st click, and the second mouse click will be deleted, I used the "nearest ()" in a different state. Does not work.

Please, help.

For code click here

JS: =

var selected = $('.demo-select'); selected.click(function() { $(this).toggleClass('selected'); if ($('.demo-select').hasClass('selected')) { //alert(1); $(this).append('<p class="test">check</p>'); } else { //alert(2); $('.demo-select').closest('.test').remove(); } });
+5
source share
5 answers

You need to use find () because you are looking for a descendant element, not an ancestor element ( .closest () is used to find the ancestor element that matches the passed selector).

 $(this).find('.test').remove();

Demo: Fiddle

+7
source

Here you need to use find () instead of closet ()

find (): get the children of each element in the current set of matched elements filtered by a selector, jQuery object, or element

closet (): for each element in the set, get the first element that corresponds to the selector by testing the element itself and passing its ancestors in the DOM tree.

 var selected = $('.demo-select'); selected.click(function() { $(this).toggleClass('selected'); if ($('.demo-select').hasClass('selected')) { //alert(1); $(this).append('<p class="test">check</p>'); } else { //alert(2); $(this).closest('.test').remove(); } }); 
 .demo-select { border: 1px solid; height: 200px; width: 200px; } .test { color: red } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="demo-select"></div> <div class="demo-select"></div> <div class="demo-select"></div>

Demo: http://jsfiddle.net/tharindukumara/3b4forzd/

+4
source

Use find() to achieve this. Since closest() will intersect through its ancestors in the DOM tree, and not in its divisions.

 $('.demo-select').find('.test').remove(); //OR simply $(this).find('.test').remove()

Update

For multiple items, use $(this)

 var selected = $('.demo-select'); selected.click(function() { $(this).toggleClass('selected'); if ($(this).hasClass('selected')) { //HERE $(this) //alert(1); $(this).append('<p class="test">check</p>'); } else { //alert(2); $('this').find('.test').remove(); //HERE $(this) and find() } });
+3
source

closest will provide you with the closest ancestor. You should use find to get .test :

 var selected = $('.demo-select'); selected.click(function () { $(this).toggleClass('selected'); if ($('.demo-select').hasClass('selected')) { $(this).append('<p class="test">check</p>') } else { $(this).find('.test').remove(); //^^^^^^^^^^^^^^^^^^^ } });

Demo: https://jsfiddle.net/tusharj/16dsa65j/4/

find :

Get the children of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

Docs: http://api.jquery.com/find/

EDIT

For multiple items:

Demo: http://jsfiddle.net/tusharj/16dsa65j/9/

+2
source

you need to find the element instead of making the closest selection to the element.

 $('.demo-select').find('.test').remove();
0
source

More articles:


All Articles