添加/删除项目列表

Question

I'm practicing with javascript . I built a grocery list in which I would like to add and remove items. Adding elements works fine by typing a name in a input form and pushing the send button. I'd like to remove the element that I just created by clicking on it but I get this error instead:

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

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

How could I get through this? Thank you guys for your help

Answer 1

if ("DOMNodeInserted") { document.addEventListener("click", removeItem, false); } if ("DOMNodeInserted") { document.addEventListener("click", removeItem, false); } is wrong. you need to attach this event handler to each list you create. you can do that in addItem() using elElement.addEventListener("click", removeItem, false); , then in removeItem(e) just use e to get current element using e.currentTarget and remove it.

This seems to work:

 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

Your problem is here:

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

This document.getElementsByTagName return an HTMLElementCollection which does not have the a property called parentNode . An element from that collection would.

To avoid the undefined error, you need to check if your object is null or undefined before trying to call a method on in such as .removeChild .

In your case, elContainer is null because the elElement is an HTMLElementCollection which doesn't have the .parentNode property.

You can access elements in the collection by index. It also has a length property which you should check to make sure that the collection has elements.

So if you want to remove the first LI, they you can do it like this.

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

So if you want to remove the that last LI, they you can do it like this.

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