通过标记名称删除元素

我试图通过使用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]); 
    } 
}

其中“测试”是我在HTML中的ul元素的名称。我在控制台收到一条消息，表示父母未定义。关于如何修改代码以便删除li元素的任何建议？

来源

2013-03-08 user2084813

这个问题似乎是，你开始在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-08 18:47:39 Ryan

这个工作，该是HTML的一部分列表项。谢谢。但是，现在我需要弄清楚如何删除我动态添加到页面 – user2084813 2013-03-08 19:23:19

@ user2084813的这样的项目：只要您将它添加到同一位置，它将以相同的方式工作。你可以显示你的代码来动态添加一个元素吗？ – Ryan 2013-03-08 20:05:12

谢谢你已经给我我需要的一切。我刚刚添加了一个类名到李，他们被添加到页面，然后我更改var列表等于类名称，而不是使用标签名称 – user2084813 2013-03-08 20:13:32

快到了，两个小错误：

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的一些项目。

来源

2013-03-08 18:47:50

这是有道理的，但我收到一条消息说，列表[k]未定义 – user2084813 2013-03-08 18:54:37

应该从'length - 1'开始 – 2013-03-08 18:55:16

@PaulS。固定，谢谢 – 2013-03-08 18:56:59

可以在somethig概括这样的：

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是一个节点列表，没有一个父母;列表中的每个元素可以有不同的父项。

来源

2013-03-08 19:03:30 ZER0

由getElementsByTagName返回的NodeList（通常）是实时的（动态的）。这意味着它是长度随着节点被删除而减少。因此你必须在循环中考虑这一点。
以下是一些如何避开它的例子。

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-08 19:12:40

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-08 19:23:48 Pandian

通过标记名称删除元素

回答

相关问题