删除列表中的最后一项答案

【问题标题】：Deleting last item on the list删除列表中的最后一项
【发布时间】：2017-01-14 19:18:37
【问题描述】：

我有一个简单的 HTML 无序列表和一个在 [0] 位置添加项目的 JavaScript 函数，以及另一个在 [0] 删除项目的 JavaScript 函数，但是我可以在删除函数中添加什么（严格的基本 JavaScript如果它更长）所以它会删除最后添加的项目？提前致谢：

HTML：

    <html>

    <body>

       <h1> Shopping List </h1>


        <button onclick="adding()"> Add </button>

        <input type="text" id="input" placeholder="Enter Items"> </input>

        <button onclick="remove()"> Remove Last </button>


        <ul id="list">


        </ul>


    </body>

</html>

Javascript：

function adding() {

 var input = document.getElementById("input").value;
 var newEl = document.createElement("li");
 var newText = document.createTextNode(input);

 newEl.appendChild(newText);

 var position = document.getElementsByTagName("ul")[0]; 
 position.appendChild(newEl);



 document.getElementById("input").value = "";

}

 function remove() {
 var removeEl = document.getElementsByTagName("li")[0];
 var containerEl = removeEl.parentNode;
 containerEl.removeChild(removeEl);

 }

【问题讨论】：

为什么不使用 JQuery。 w3schools.com/jquery/sel_last.asp
我知道肯定会更容易，但我还没有接触过 Jquery，这是一个练习。

标签： javascript html

【解决方案1】：

function adding() {

 var input = document.getElementById("input").value;
 var newEl = document.createElement("li");
 var newText = document.createTextNode(input);

newEl.appendChild(newText);

var position = document.getElementsByTagName("ul")[0]; 
 position.appendChild(newEl);



document.getElementById("input").value = "";

}

function remove() {
 var els = document.getElementsByTagName("li");
 var removeEl = els[els.length - 1];            // <-- fetching last el
 var containerEl = removeEl.parentNode;
 containerEl.removeChild(removeEl);
 }

<html>
<h1> Shopping List </h1>


<button onclick="adding()"> Add </button>

 <input type="text" id="input" placeholder="Enter Items"> </input>

<button onclick="remove()"> Remove Last </button>


<ul id="list">


</ul>


</body>

</html>

如果els 是一个数组，它的索引从0 到els.length - 1。 0 是第一个，els.length - 1 是最后一个索引。

此外，尽量不要使用像onclick="adding()" 这样的属性事件处理程序。更好的做法是以编程方式附加它们，以便清晰地分离关注点：

<button id="add">Add</button>

然后

document.getElementById('add').addEventListener('click', adding);

【讨论】：

简单，正是我想要的，谢谢。也感谢您的解释。我将其更改为 eventListener。
如果没有li，则删除时崩溃。
你能做些什么呢？
测试els是否为空。

【解决方案2】：

纯粹地说，这回答了问题，因为它仅删除最后添加的项目，然后不会删除其他任何内容

window.lastadded = false;
function adding() {

 var input = document.getElementById("input").value;
 var newEl = document.createElement("li"); 
 newEl.id = Date.parse(new Date());
 var newText = document.createTextNode(input);

window.lastadded = newEl.id;

newEl.appendChild(newText);

var position = document.getElementsByTagName("ul")[0]; 
 position.appendChild(newEl);


document.getElementById("input").value = "";

}

function remove() {
 lastElement = document.getElementById(window.lastadded);
lastElement.parentNode.removeChild(lastElement);
 }

【讨论】：