添加/删除列表

Question

我正在练习javascript。我建立了一个购物清单，我想添加和移除物品。通过在输入表单中输入名称并按下发送按钮，添加元素可以正常工作。我想删除我只是通过点击创建的元素，但我得到这个错误，而不是：

"Uncaught TypeError: Cannot read property 'removeChild' of undefined at HTMLDocument.removeItem"

这里的代码：

HTML： -

<div id="paper"> 
    <h3 id="title">Groceries list:</h3> 
    <ul id="list"> 
     <li></li> 
    </ul> 
</div> 

<p class="grocery"> 
    <input type="text" name="grocery" placeholder="ex. Apple" id="blank" /> 
    <label for="grocery">Grocery Name</label> 
</p> 

<p class="submit"> 
    <input type="submit" value="SEND" id="btn" /> 
</p> 


<script type="text/javascript" src="js/script.js"></script> 

CSS： -

#paper { 
    width: 300px; 
    height: auto; 
    margin: 20px auto; 
    clear: both; 
    background-color: orange; 
} 

.grocery, .submit{ 
    text-align: center; 
    margin: 20px; 
} 

的Javascript： -

var elList = document.getElementById("list"); 
var elButton = document.getElementById("btn"); 

function addItem(e) { 
    var elElement = document.createElement("li"); 
    var whatever = el.value; 
    var elText = document.createTextNode(whatever); 
    elElement.appendChild(elText); 
    elList.appendChild(elElement); 
} 

function removeItem(e) { 
    var elElement = document.getElementsByTagName("li"); 
    var elContainer = elElement.parentNode; 
    elContainer.removeChild(elElement); 
} 

var el = document.getElementById("blank"); 

elButton.addEventListener("click", addItem, false); 

if ("DOMNodeInserted") { 
    document.addEventListener("click", removeItem, false); 
} 

我怎么能通过这个？ 谢谢你们的帮助

Answer 1

if ("DOMNodeInserted") { document.addEventListener("click", removeItem, false); }是错误的。您需要将此事件处理程序附加到您创建的每个列表。 你可以在addItem()使用elElement.addEventListener("click", removeItem, false);，然后在removeItem(e)只需使用e获取当前元素使用e.currentTarget并将其删除。

这似乎工作：

var elList = document.getElementById("list"); 
 
var elButton = document.getElementById("btn"); 
 

 
function addItem(e) { 
 
    var elElement = document.createElement("li"); 
 
    var whatever = el.value; 
 
    var elText = document.createTextNode(whatever); 
 
    elElement.appendChild(elText); 
 
    elList.appendChild(elElement); 
 
    elElement.addEventListener("click", removeItem, false); 
 
} 
 

 
function removeItem(e) { 
 
    var elElement = e.currentTarget; 
 
    var elContainer = elElement.parentNode; 
 
    elContainer.removeChild(elElement); 
 
} 
 

 
var el = document.getElementById("blank"); 
 

 
elButton.addEventListener("click", addItem, false);

#paper { 
 
    width: 300px; 
 
    height: auto; 
 
    margin: 20px auto; 
 
    clear: both; 
 
    background-color: orange; 
 
} 
 

 
.grocery, .submit{ 
 
    text-align: center; 
 
    margin: 20px; 
 
}

<div id="paper"> 
 
<h3 id="title">Groceries list:</h3> 
 
<ul id="list"> 
 
    <li></li> 
 
</ul> 
 
</div> 
 

 
<p class="grocery"> 
 
<input type="text" name="grocery" placeholder="ex. Apple" id="blank" /> 
 
<label for="grocery">Grocery Name</label> 
 
</p> 
 

 
<p class="submit"> 
 
<input type="submit" value="SEND" id="btn" /> 
 
</p>

Answer 2

你的问题是在这里：

function removeItem(e) { 
    var elElement = document.getElementsByTagName("li"); 
    var elContainer = elElement.parentNode; 
    elContainer.removeChild(elElement); 
} 

这document.getElementsByTagName返回其不具有的属性称为parentNode的HTMLElementCollection。该集合中的元素会。

为了避免未定义的错误，您需要在尝试调用.removeChild之类的方法之前检查对象是否为空或未定义。

对你而言，elContainer为空，因为elElement是HTMLElementCollection，它没有.parentNode属性。

您可以按索引访问集合中的元素。它还有一个长度属性，您应该检查以确保该集合包含元素。

所以，如果你想删除第一个李，他们你可以这样做。

function removeItem(e) { 
    var elements= document.getElementsByTagName("li"); 
    if (elements.length==0) return; 
    var elElement = elements[0]; 
    var elContainer = elElement.parentNode; 
    elContainer.removeChild(elElement); 
} 

所以，如果你想删除最后一个李，他们你可以这样做。

function removeItem(e) { 
    var elements= document.getElementsByTagName("li"); 
    if (elements.length==0) return; 
    var elElement = elements[elements.length-1]; 
    var elContainer = elElement.parentNode; 
    elContainer.removeChild(elElement); 
}