刪除列表上的最後一個項目

我有一個簡單的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

刪除列表上的最後一個項目

回答

相關問題