I have made simple functionality for select(add check) div on 1st click and 2nd click it will be remove, I have used "closest()" in else condition. Not getting.

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();
    }
});

I have made simple functionality for select(add check) div on 1st click and 2nd click it will be remove, I have used "closest()" in else condition. Not getting.

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();
    }
});

• javascript
• jquery

5 Answers 5

Need to use find() as you are looking for a descendant element not an ancestor element(.closest() is used to find an ancestor element matching the passed selector).

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

Demo: Fiddle

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

find() : Get the descendants 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 matches the selector by testing the element itself and traversing up through 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./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/tharindukumara/3b4forzd/

Use find() to achieve this. As closest() will traverse up through its ancestors in the DOM tree and not its decendents.

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

Update

For multiple elements 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()
    }
});

closest will get you the closest ancestor. You should use find to get the .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/tusharj/16dsa65j/4/

find:

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

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

EDIT

For multiple elements:

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

you need to find the element instead of doing closest selection for the element.

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