リストの最後のアイテムを削除する

シンプルなHTMLの順序付けされていないリストと、[0]の位置にアイテムを追加するJavaScript関数がありますが、[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>

場合は配列で、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

リストの最後のアイテムを削除する

答えて

関連する問題