1

我正在尝试使用 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 元素的任何建议？

4

5 回答 5

3

问题似乎是您从while开始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);
  }
}
于 2013-03-08T18:47:39.807 回答
0

返回的NodeListgetElementsByTagName（通常）是实时的（动态的）。这意味着它的长度随着节点的删除而减小。因此，您必须在循环中考虑这一点。
这里有一些更多的例子来说明如何绕过它。

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
}
于 2013-03-08T19:12:40.700 回答
0

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]);
  }
}
于 2013-03-08T19:23:48.843 回答
0

你可以这样概括：

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

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

您的主要错误是，而k++不是–是NodeList，没有父级；列表的每个元素都可以有不同的父元素。k--list.parentNodelist[k].parentNodelist

于 2013-03-08T19:03:30.687 回答
0

几乎就在那里，两个小错误：

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

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

于 2013-03-08T18:47:50.110 回答