How to remove all li in my ul using id?

Question

I have a ul list.

I want to delete all li in my ul using id?

Answer 1

All that jQuery .:-)

Simple old javascript version:

var ul = document.getElementById('<ul id>'); if (ul) { while (ul.firstChild) { ul.removeChild(ul.firstChild)); } } 

You can also install:

  ul.innerHTML = ''; 

or even:

  ul.parentNode.replaceChild(ul.cloneNode(false), ul); 

but I prefer the first method.

Answer 2

If you want to remove all li elements inside ul with a specific ID:

 $('#id-of-ul > li').remove(); 

Since ul only has li children, you can also use $('#id-of-ul').empty() to remove all its children.

Answer 3

You can also use empty() :

 $('#listId').empty(); 

Answer 4

* Using jQuery

Did you mean that you want to delete everything with the same identifier? (This is how I interpreted the question)

 $('#id').remove() 

(remember that using the same identifier on multiple DOM elements is not considered good programming and should always be avoided! Always use a good IDE to encode your code)

You can also delete using a class (this is the best way to remove grouped items by class name)

 $('.className').remove() 

These two functions remove ALL elements with identifier / class. To limit the removal of id / class'es only from LI

 $('li #id').remove(); $('li .className').remove(); 

You can also make a function in JavaScript. This will remove any DOM by clicking on the itemDelete element.

 $('.itemDelete').live("click", function() { var id = $(this).parent().get(0).id; $("#" + id).remove(); }); 

Do a loop and call a function?

 function deleteLI(id) { $("#" + id).remove(); }; 

Answer 5

A quick, dirty, clean way to do this:

 var ul = document.getElementById("ul_id"); ul.innerHTML = ""; 

This, of course, assumes that there are no other great children that you do not want to squeeze.

Answer 6

You need to make a call to the remove() method.

 // Removes a single element with the specified id $('#id-of-the-element').remove(); 

Look at the documentation for more information.

Answer 7

The following should work:
$('#uiId').remove('li');