添加/刪除列表

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); 
}