Question

我正在尝试使用javascript按标记名称删除元素。我为一个名为“clear”的按钮设置了一个单击处理程序。我正在尝试使用函数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”是我在HTML中拥有的ul元素的名称。我在控制台中收到一条消息，指出父级未定义。有关如何修改代码的任何建议，以便我可以删除li元素？

Answer 1

问题似乎是list.length时开始{/ 1}}和递增 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]);
  }
}

请注意，递减而不是递增是要做的事情，因为相反的顺序会使您跳过动态nodelists的某些项。

Answer 3

你可以像这样概括一下：

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 4

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
}

Answer 5

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]);
  }
}

按标签名称删除元素

5 个答案: