我正在尝试使用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元素?
答案 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]);
}
}