Удаление элемента по имени тега

Question

Я пытаюсь удалить элемент по имени тега, используя JavaScript. Я установил обработчик кликов для кнопки под названием "очистить". Я пытаюсь использовать функцию clear, чтобы удалить все элементы li из списка. Это то, что я до сих пор:

function clear() {
  var list = document.getElementById("test").getElementsByTagName("li");
  for (k = list.length; k >= 0; k++) {
    var parent = list.parentNode;
    parent.removeChild(list[k]);
  }
}

Где "test" - это имя элемента ul, которое есть в HTML. Я получаю сообщение в консоли, что родитель не определен. Любые предложения о том, как мне нужно изменить код, чтобы я мог удалить элементы li?

Answer 1

Кажется, проблема в том, что вы начинаете с list.length и увеличивая время k >= 0, Бесконечный цикл.

Кроме того, вам нужно использовать list[k].parentNode, а ты не декларируешь k, так:

function clear() {
  var list = document.getElementById("test").getElementsByTagName("li");
  for (var k = list.length - 1; k >= 0; k--) {
    var item = list[k];
    item.parentNode.removeChild(item);
  }
}

Answer 2

Почти там две небольшие ошибки:

function clear() {
  var list = document.getElementById("test").getElementsByTagName("li");
  for (var k = list.length; k-- > 0; ) { // decrement from list.length-1 to 0
    var parent = list[k].parentNode; // you need the parent of the item, not the list
    parent.removeChild(list[k]);
  }
}

Обратите внимание, что уменьшение, а не увеличение - это то, что нужно сделать, так как обратный порядок заставит вас пропустить некоторые элементы динамических списков узлов.

Answer 3

HTML:

<ul id="test" type="bullet">
    <li>apple</li>
    <li>Orange</li>
</ul>

<button onclick="Clearall()">Click me</button>

Если твой UL тег содержит только LI теги, попробуйте, как показано ниже... Это поможет вам..

function Clearall()
{
 document.getElementById("test").innerHTML="";
}

Если твой UL тег содержит LI тег и другие теги, попробуйте, как показано ниже.. Это поможет вам..

Javascript:

function Clearall()
{
  var ul = document.getElementById("test");
  var lis = ul.getElementsByTagName("li");
  while(lis.length > 0)
  {
   ul.removeChild(lis[lis.length - 1]);
  }
}

Answer 4

Вы можете обобщить что-то вроде этого:

function clear(list) {
  for (var i = list.length, li; li = list[--i];)
    li.parentNode.removeChild(li);
}

clear(document.getElementById("test").getElementsByTagName("li"));

Ваши основные ошибки были k++ вместо k-- а также list.parentNode вместо list[k].parentNode - list является NodeList, не имеет родителя; каждый элемент списка может иметь своего родителя.

Answer 5

NodeList возвращается getElementsByTagName является (обычно) живым (динамическим). Это означает, что его длина уменьшается при удалении узлов. Поэтому вы должны учитывать это в своем цикле.
Вот еще несколько примеров того, как обойти это.

function clear() {
    var nodes = document.getElementById("test").getElementsByTagName("li"),
        i = nodes.length; // one var statement at beginning
    // Choose one of
    while (i--) { // same as `i-->0`
        nodes[i].parentNode.removeChild(nodes[i]); // remove nodes from end
    }
    // OR
    while (nodes.length) { // same as `nodes.length>0`, okay as dynamic list
        nodes[0].parentNode.removeChild(nodes[0]); // remove nodes from start
    }
    // OR
    for (; i >= 0; --i) {
        nodes[i].parentNode.removeChild(nodes[i]); // remove nodes from end
    }
    // etc
}