Question

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

“Uncaught TypeError：无法读取HTMLDocument.removeItem中未定义的属性'removeChild'”

这里是代码：

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获取当前元素并将其删除。

这似乎有效：

＆＃13;

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

＆＃13;

#paper {
   width: 300px;
   height: auto;
   margin: 20px auto;
   clear: both;
   background-color: orange;
}

.grocery, .submit{
   text-align: center;
   margin: 20px;
}

＆＃13;

<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>

＆＃13;

Answer 2

你的问题在这里：

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

此document.getElementsByTagName返回一个HTMLElementCollection，它没有名为parentNode的属性。该集合中的元素会。

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

在您的情况下，elContainer为空，因为elElement是一个HTMLElementCollection，它没有.parentNode属性。

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

所以如果你想删除第一个LI，你就可以这样做。

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

因此，如果你想删除最后一个LI，你就可以这样做。

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

添加/删除项目列表

2 个答案: