从$ .each中的DOM中删除元素

Question

I have list of elements and on certain event I want to destroy them from the dom.

if (appendedElements.length > 0) {
    $.each(appendedElements, function (i) {
        $(i).remove();
   })
}

appendedElements are of course greater than zero but I'm not deleting elements. What's wrong with this code?

Answer 1

The problem is that the first argument of the parameter method is an index of the element, not the element itself. This one is passed as a second parameter. Try:

if (appendedElements.length > 0) {
    $.each(appendedElements, function (i, element) {
        $(element).remove();
       //i = 0, 1, 2....
   })
}

The whole reference with examples you can find here:

http://api.jquery.com/jquery.each/

Answer 2

If the appendedElements is a jQuery object or is an array of dom element references then there is no need to iterate, you can just call the remove method like

$(appendedElements).remove();

As already suggested the problem is the first param to the each callback is the index of the item, not the item itself.

Answer 3

if (appendedElements.length > 0) {
    $.each(appendedElements, function (i) {
        $(this).remove(); // use this
   })
}

Answer 4

You should use the second argument of the each callback function:

if (appendedElements.length > 0) {
    $.each(appendedElements, function (index, element) {
        $(element).remove();
   })
}

Answer 5

You can try it without .each for example if you have list... something like that

<ul id="columar">
  <li>ok</li>
  <li>ok</li>
  <li>ok</li>
  <li>ok</li>
</ul>

if you wanna remove the li list you can wiht this code:

if (2 == 2) {
  $('#columar li').remove()
}

JSFiddle