1
回答
js如何实现将动态生成的li节点进行删除
华为云4核8G,高性能云服务器,免费试用   

添加动态li实现方式如下:

var li=document.createElement("li");
  li.setAttribute("id",liid);
  li.innerHTML='<input type="checkbox" ></input>';
  document.getElementById("done").appendChild(li);

<td colspan="4">
<ul class="testCommand">
<div id="done"></div>
</ul>
</td>


删除方法如下:

function testCommanDelete(){
var str=document.getElementsByName("testCommand");
var objarray=str.length;
for (i=0;i<objarray;i++){
if(str[i].checked == true){
  var liid = str[i].value;
  alert(liid);
  var parent=document.getElementById("done");
  var child=document.getElementById(liid);
  parent.parentNode.removeChild(child);
}
}
}

页面报错如下:

谷歌: An attempt was made to reference a Node in a context where it does not exist.

ie:SCRIPT5022: NotFoundError 


可能有人会说,报这个错误的原因是因为没有找到父节点下面相关的子节点,但是通过谷歌的查看原代如下


难道是因为动态生成的原因吗?如果是的话,那么对于动态生成的li怎么进行删除操作?

<无标签>
举报
汪正习
发帖于3年前 1回/3K+阅

以下是问题补充:

  • @汪正习 :可能有人会说,为什么在ul里面加上个div啊,直接在ul下面进行添加li,然后删除的时候找ul,再找li,这个我也试过了,没卵用,还是报一样的错误。 (3年前)
共有1个答案 最后回答: 3年前

这个问题太简单了,阁下却是搞复杂了。

首先指出代码不规范的地方:

  1. ul标签下的div标签不规范,虽然不会抱错;
  2. li.innerHTML='<input type="checkbox" ></input>';这行代码应该去掉后面的“</input>” 或者改为li.innerHTML='<input type="checkbox" />';
  3. 阁下这样用id,中文id,我不敢确保又没有问题,但id不能有重复,而且非常不建议用中文

以上阁下修改了然而并不一定有什么乱用,但看阁下的代码,我觉得阁下是不是用html和js有没有满月?若阁下是初学者,请好好打好基础先,学习一下w3c规范,这对阁下以后的学习和工作大有帮助。

以下正文:

代码 var str=document.var str=document.getElementsByName("testCommand"); getElementsByName方法是通过Name获取元素,而你的<ul class="testCommand"> 是class属性,是否应该用getElelementsByClassName方法?

嗯,好像你这个是误导人的,你的意思应该是 li.innerHTML='<input type="checkbox" name="testCommand"/>';

然后是var liid = str[i].value; 你的测试代码还是有问题,li下的checkbox没有value熟悉啊

 var parent=document.getElementById("done");
  var child=document.getElementById(liid);
  parent.parentNode.removeChild(child);

这段代码: 你确定你写对了吗吗吗???parent.parentNode??等能remove对吗?

还有,经过我测试,动态添加的删除绝对没有问题!有问题的是你的代码,好好检查和调试先吧。

--- 共有 1 条评论 ---
汪正习谢谢大神的指教,确实是对js和html不熟悉,自己就是个小学生,多谢批评教育! 3年前 回复
顶部