Question

我有一个简单的HTML无序列表和一个JavaScript函数，它在位置[0]添加项目，另一个删除[0]的项目，但是我可以添加到删除功能（严格基本的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);

 }

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

然后

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

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

删除列表中的最后一项

2 个答案: