javascript - Removing LI from UL in for loop (JS) - Stack Overflow

admin管理员组

文章数量:1406924

I'm trying to remove items from a list when a button is clicked.

JSFiddle here - /

HTML

<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<a class="btn" onclick="emptyList()">clear list</a>

JS

window.emptyList = function () {
  var ul = document.querySelector('.list');
  var listLength = ul.children.length;

  for (i = 0; i < listLength; i++) {
    ul.childNodes[i].removeChild();
  }

  // this works
  // ul.innerHTML = "";

}

The problem is that when i click the button only a few items are removed from the list e.g. in the example above I click the 'clear list' button once and items 1, 3 and 5 are removed. I click the button a second time and item 2 is removed. Finally on the third click the list is emptied.

I can actually remove the elements easily enough if i set ul.innerHTML = "";

But I can't seem to figure out why the the emptyList function isn't working as expected and would appreciate any insight in to where i'm going wrong.

Thanks,

I'm trying to remove items from a list when a button is clicked.

JSFiddle here - https://jsfiddle/y3u47f11/15/

HTML

<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<a class="btn" onclick="emptyList()">clear list</a>

JS

window.emptyList = function () {
  var ul = document.querySelector('.list');
  var listLength = ul.children.length;

  for (i = 0; i < listLength; i++) {
    ul.childNodes[i].removeChild();
  }

  // this works
  // ul.innerHTML = "";

}

The problem is that when i click the button only a few items are removed from the list e.g. in the example above I click the 'clear list' button once and items 1, 3 and 5 are removed. I click the button a second time and item 2 is removed. Finally on the third click the list is emptied.

I can actually remove the elements easily enough if i set ul.innerHTML = "";

But I can't seem to figure out why the the emptyList function isn't working as expected and would appreciate any insight in to where i'm going wrong.

Thanks,

• javascript

Share Improve this question Follow asked Mar 17, 2017 at 8:54 Jon KJon K 12522 silver badges1212 bronze badges 1

• 1 what ul.children.length returns ? – Brave Soul Commented Mar 17, 2017 at 8:56

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

The chlidren or childNodes is live element collection(HTMLCollection) so index may update after each remove, so remove the element at index 0. Although apply removeChild on parent node and add element as the argument.

window.emptyList = function () {
  var ul = document.querySelector('.list');
  var listLength = ul.children.length;

  for (i = 0; i < listLength; i++) {
    ul.removeChild(ul.children[0]);
  }
}

<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<a class="btn" onclick="emptyList()">clear list</a>

---

FYI : The childNodes includes the text nodes so use chlidren property instead.

I think you need to do it in reverse order because when removing a node index no longer points to the correct node afterwards because the whole list has been reduced. Also, just query the li elements directly

window.emptyList = function () {
  var li = document.querySelectorAll('.list > li');
  var listLength = li.length;
  
  for (var i = listLength-1; i >=0 ; i--) {
    li[i].parentNode.removeChild(li[i]);   
  }
  
  // this works
  // ul.innerHTML = "";

}

<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<a class="btn" onclick="emptyList()">clear list</a>

Try the below code. You are using removeChild wrong way.

window.emptyList = function () {
      var ul = document.querySelector('.list');
      var listLength = ul.children.length;

      for (i = 0; i < listLength; i++) {
        ul.removeChild(ul.childNodes[i]);
      }
    }

window.emptyList = function () {
  var ul = document.querySelector('.list');
  var listLength = ul.children.length;

  while (ul.children.length !=0){
    ul.removeChild(ul.childNodes[0]);
  }

  // this works
  // ul.innerHTML = "";

}

the list length is altered once you remove the first one.

本文标签： javascriptRemoving LI from UL in for loop (JS)Stack Overflow