javascript - 添加/删除项目列表

Question

我正在练习 javascript。我建立了一个杂货 list ，我想在其中添加和删除项目。通过在输入表单中键入名称并按下发送按钮，可以很好地添加元素。我想通过单击删除刚刚创建的元素，但我却收到此错误:

"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("点击", 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>