我正在建立待办事项清单，而我在计算删除功能时遇到了麻烦。我不断收到错误消息，指出“找不到节点”。
我自己编写了大部分代码，但是我查找了这部分的教程。他们建议使用：
function removeItem() {
var item = this.parentNode.parentNode;
var parent = this.parentNode;
parent.removeChild(item);
};
我试图将其应用于我已经拥有的代码，但似乎无法正常工作。我也不完全清楚以下逻辑：
var item = this.parentNode.parentNode;
var parent = this.parentNode;
[如果有人也可以解释这样做的话，也将不胜感激。
HTML：
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="resources/css/styles.css">
</head>
<body>
<header id="addtodo">
<input type="text" id="input" placeholder="Add an item"/>
<button id="button" type="button">Add item</button>
</header>
<div id="listcontainer">
<ul id="itemlist">
</ul>
</div>
<div id="dividerline">
</div>
<div id="completecontainer">
<ul id="completed">
</ul>
</div>
<script src="resources/JS/code.js"></script>
</body>
JavaScript的：
document.getElementById('button').addEventListener('click', function(){
var value = document.getElementById('input').value;
var item = document.createElement("li");
var itemText = document.createTextNode(value);
var itemdiv= document.createElement('div');
var buttons=document.createElement('div');
var text=document.createElement('div');
var remove = document.createElement("button");
var complete = document.createElement("button");
var itemlist = document.getElementById('itemlist');
item.appendChild(itemdiv);
itemdiv.appendChild(text);
text.appendChild(itemText);
itemdiv.appendChild(buttons);
buttons.appendChild(complete);
buttons.appendChild(remove);
remove.innerHTML = 'Remove';
complete.innerHTML = 'Complete';
remove.classList.add('remove');
remove.setAttribute('id','remove');
complete.classList.add('complete');
complete.setAttribute('id','complete');
buttons.classList.add('buttondiv');
text.classList.add('text');
itemdiv.classList.add('itemdiv');
remove.addEventListener('click', removeItem);
complete.addEventListener('click', completeItem);
itemlist.insertBefore(item, itemlist.childNodes[0]);
});
function removeItem() {
var item = this.parentNode.parentNode;
var parent = this.parentNode;
parent.removeChild(item);
};
function completeItem() {
var item = this.parentNode.parentNode;
var parent = this.parentNode;
parent.removeChild(item);
};
我希望删除按钮删除其所附的列表项。
错误在函数中
function completeItem() {
var item = this.parentNode.parentNode;
var parent = this.parentNode;
parent.removeChild(item);
};
交换item和parent，就像这样：parent.removeChild(item);
首先，使用console.log()函数调试代码：
function removeItem() {
var item = this.parentNode.parentNode;
var parent = this.parentNode;
console.log( 'item', item ); // => <div class="itemdiv">
console.log( 'parent', parent ); // => <div class="buttondiv">
parent.removeChild(item);
};
如您所见：1）您混合了项目节点和父节点。2）如果要删除整个<li>元素，则必须使用更多的parentNode：
function completeItem() {
var parent = this.parentNode.parentNode.parentNode.parentNode;
var item = this.parentNode.parentNode.parentNode;
console.log( 'item', item ); // => <li>
console.log( 'parent', parent ); // => <ul id="itemlist">
parent.removeChild(item);
};