jQuery remove all list items from an unordered list
Asked Answered
E

9

141

I forgot the jQuery command that will clear all list elements from a list. I did a bit of searching, done it a bunch of times before, but just simply forgot the command.

$("ul").clear()
$("ul").empty()

both didn't seem to accomplish this.. which command is it again?

UPDATE:
Thanks guys, I must have some syntax error on my selector.

Emmenagogue answered 9/8, 2011 at 23:1 Comment(4)
Are you thinking of $("ul").remove();?Pimiento
$("ul").empty() should work and clear the childrens.Antiparticle
@Dave Kiss: remove will remove th ul itself.Antiparticle
ah, maybe $("ul").children().remove();Pimiento
H
312

$("ul").empty() works fine. Is there some other error?

$('input').click(function() {
  $('ul').empty()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>test</li>
  <li>test</li>
</ul>

<input type="button" value="click me" />

http://jsfiddle.net/infernalbadger/D5ss8/

Humectant answered 9/8, 2011 at 23:4 Comment(1)
raw js (no jQuery) solution: https://mcmap.net/q/161609/-remove-all-lt-li-gt-from-lt-ul-gtHan
H
18

As noted by others, $('ul').empty() works fine, as does:

$('ul li').remove();

JS Fiddle demo.

Highfalutin answered 9/8, 2011 at 23:5 Comment(0)
D
11

This should work:

$("ul").html('')
Dithyrambic answered 9/8, 2011 at 23:4 Comment(1)
That's odd. Works for me in Chrome (version 20.0). jsfiddle.net/Ax4xq In either case, I actually prefer the accepted answer.Dithyrambic
K
4

If you have multiple ul and want to empty specific ul then use id eg:

<ul id="randomName">
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>


<script>
  $('#randomName').empty();
</script>

$('input').click(function() {
  $('#randomName').empty()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="randomName">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<ul>
  <li>4</li>
  <li>5</li>
</ul>
<input type="button" value="click me" />
Kenogenesis answered 15/4, 2017 at 7:44 Comment(0)
A
3

$("ul").empty() should work and clear the childrens. you can see it here:

http://jsfiddle.net/ZKFA5/

Antiparticle answered 9/8, 2011 at 23:7 Comment(0)
C
3
   var ul = document.getElementById("yourElementId");

     while (ul.firstChild)
         ul.removeChild(ul.firstChild);
Cyrene answered 14/5, 2018 at 12:44 Comment(0)
P
1

Look your class or id. Perhaps Like This $("#resi_result").html(''); This should work:

Pontificals answered 1/1, 2015 at 20:6 Comment(1)
Welcome to SO! Why do you think your answer improves on the existing, accepted answer?Paymar
R
0

An example using .remove():

<p>Remove LI's from list</p>
<ul>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
</ul>
<p>END</p>

setTimeout(function(){$('ul li').remove();},1000);

http://jsfiddle.net/userdude/ZAd2Y/

Also, .empty() should have worked.

Referendum answered 9/8, 2011 at 23:5 Comment(0)
A
0

this worked for me with minimal code

$(my_list).remove('li');
Aubade answered 22/5, 2018 at 18:51 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.