按标签名称删除元素

时间:2013-03-08 18:46:13

标签: javascript removechild getelementsbytagname

我正在尝试使用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元素?

5 个答案:

答案 0 :(得分:3)

问题似乎是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);
  }
}

答案 1 :(得分: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]);
  }
}

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

答案 2 :(得分:0)

你可以像这样概括一下:

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,没有父级;列表中的每个元素都可以有不同的父元素。

答案 3 :(得分:0)

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
}

答案 4 :(得分: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]);
  }
}