Objektliste hinzufügen/entfernen

Question

Ich übe mit javascript. Ich habe eine Einkaufsliste erstellt, in der ich Artikel hinzufügen und entfernen möchte. Das Hinzufügen von Elementen funktioniert gut, indem Sie einen Namen in ein Eingabeformular eingeben und die Senden-Schaltfläche drücken. Ich möchte das Element entfernen, die ich nur durch einen Klick auf sie erstellt, aber ich erhalte diesen Fehler statt:

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

hier der Code:

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

Wie könnte ich durchkommen? Danke Jungs für Ihre Hilfe

Answer 1

if ("DOMNodeInserted") { document.addEventListener("click", removeItem, false); } ist falsch. Sie müssen diesen Ereignishandler an jede von Ihnen erstellte Liste anhängen. können Sie das in addItem() mit elElement.addEventListener("click", removeItem, false); tun, dann in removeItem(e) einfach e verwenden, um aktuelles Element mit e.currentTarget zu erhalten und es zu entfernen.

Dies scheint zu funktionieren:

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

Ihr Problem ist hier:

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

Diese document.getElementsByTagName eine HTMLElementCollection zurück, die nicht die eine Eigenschaft parentNode genannt hat. Ein Element aus dieser Sammlung würde.

Um den undefinierten Fehler zu vermeiden, müssen Sie überprüfen, ob Ihr Objekt null oder nicht definiert ist, bevor Sie versuchen, eine Methode wie .removeChild aufzurufen.

In Ihrem Fall ist elContainer null, da elElement eine HTMLElementCollection ist, die nicht über die .parentNode-Eigenschaft verfügt.

Sie können auf Elemente in der Sammlung nach Index zugreifen. Es hat auch eine Längeneigenschaft, die Sie überprüfen sollten, um sicherzustellen, dass die Sammlung Elemente enthält.

Also, wenn Sie die erste LI entfernen möchten, können Sie es so tun.

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

Also, wenn Sie das letzte LI entfernen möchten, können Sie es so machen.

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