删除列表上的最后一个项目

我有一个简单的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); 

}

来源

2016-09-07 Sergi

为什么不使用JQuery。 http://www.w3schools.com/jquery/sel_last.asp – ajaykumar

我知道确实会更容易，但我还没有碰过Jquery，这是一个练习。 – Sergi

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

来源

2016-09-07 07:53:22 Amadan

简单而正是我想要的，谢谢。并感谢您的解释。我会将其更改为eventListener。 – Sergi

如果没有任何'li'则会在删除时崩溃。 –

你能做些什么？ – Sergi

纯粹地讲这个答案，因为它仅删除最后添加的项目再拿下不删除任何东西

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

来源

2016-09-07 08:10:53

删除列表上的最后一个项目

回答

相关问题