商品の一覧を追加/削除

Question

私はjavascriptで練習中です。私はアイテムを追加したり削除したりする食料品リストを作成しました。要素を追加するには、入力フォームに名前を入力し、送信ボタンを押してください。私はちょうどそれをクリックすることで作成された要素を削除したいが、私は代わりに、このエラーが発生します。

ここ

"Uncaught TypeError: Cannot read property 'removeChild' of undefined at HTMLDocument.removeItem"

コード：

HTML： -

<div id="paper"> 
    <h3 id="title">Groceries list:</h3> 
    <ul id="list"> 
     <li></li> 
    </ul> 
</div> 

<p class="grocery"> 
    <input type="text" name="grocery" placeholder="ex. Apple" id="blank" /> 
    <label for="grocery">Grocery Name</label> 
</p> 

<p class="submit"> 
    <input type="submit" value="SEND" id="btn" /> 
</p> 


<script type="text/javascript" src="js/script.js"></script> 

CSS： -

#paper { 
    width: 300px; 
    height: auto; 
    margin: 20px auto; 
    clear: both; 
    background-color: orange; 
} 

.grocery, .submit{ 
    text-align: center; 
    margin: 20px; 
} 

Javascriptを： -

var elList = document.getElementById("list"); 
var elButton = document.getElementById("btn"); 

function addItem(e) { 
    var elElement = document.createElement("li"); 
    var whatever = el.value; 
    var elText = document.createTextNode(whatever); 
    elElement.appendChild(elText); 
    elList.appendChild(elElement); 
} 

function removeItem(e) { 
    var elElement = document.getElementsByTagName("li"); 
    var elContainer = elElement.parentNode; 
    elContainer.removeChild(elElement); 
} 

var el = document.getElementById("blank"); 

elButton.addEventListener("click", addItem, false); 

if ("DOMNodeInserted") { 
    document.addEventListener("click", removeItem, false); 
} 

どうすればこの問題を解決できますか？

function removeItem(e) { 
    var elElement = document.getElementsByTagName("li"); 
    var elContainer = elElement.parentNode; 
    elContainer.removeChild(elElement); 
} 

これはparentNodeと呼ばれるプロパティを持っていませんHTMLElementCollectionを返すdocument.getElementsByTagName： はあなたの問題はここにあるあなたの助け

Answer 1

if ("DOMNodeInserted") { document.addEventListener("click", removeItem, false); }が間違っています。作成した各リストにこのイベントハンドラーをアタッチする必要があります。 addItem()でelElement.addEventListener("click", removeItem, false);を使用し、次にremoveItem(e)でeを使用して、e.currentTargetを使用して現在の要素を取得して削除することができます。

これは動作するようです：

var elList = document.getElementById("list"); 
 
var elButton = document.getElementById("btn"); 
 

 
function addItem(e) { 
 
    var elElement = document.createElement("li"); 
 
    var whatever = el.value; 
 
    var elText = document.createTextNode(whatever); 
 
    elElement.appendChild(elText); 
 
    elList.appendChild(elElement); 
 
    elElement.addEventListener("click", removeItem, false); 
 
} 
 

 
function removeItem(e) { 
 
    var elElement = e.currentTarget; 
 
    var elContainer = elElement.parentNode; 
 
    elContainer.removeChild(elElement); 
 
} 
 

 
var el = document.getElementById("blank"); 
 

 
elButton.addEventListener("click", addItem, false);

#paper { 
 
    width: 300px; 
 
    height: auto; 
 
    margin: 20px auto; 
 
    clear: both; 
 
    background-color: orange; 
 
} 
 

 
.grocery, .submit{ 
 
    text-align: center; 
 
    margin: 20px; 
 
}

<div id="paper"> 
 
<h3 id="title">Groceries list:</h3> 
 
<ul id="list"> 
 
    <li></li> 
 
</ul> 
 
</div> 
 

 
<p class="grocery"> 
 
<input type="text" name="grocery" placeholder="ex. Apple" id="blank" /> 
 
<label for="grocery">Grocery Name</label> 
 
</p> 
 

 
<p class="submit"> 
 
<input type="submit" value="SEND" id="btn" /> 
 
</p>

Answer 2

ために皆さんありがとうございました。そのコレクションの要素があります。

未定義のエラーを回避するには、.removeChildなどでメソッドを呼び出す前に、オブジェクトがnullか未定義かどうかを確認する必要があります。

elElementが.parentNodeプロパティを持たないHTMLElementCollectionであるため、elContainerがnullです。

インデックスのコレクション内の要素にアクセスできます。コレクションに要素があることを確認するためにチェックする長さプロパティもあります。

最初のLIを削除する場合は、このようにすることができます。

function removeItem(e) { 
    var elements= document.getElementsByTagName("li"); 
    if (elements.length==0) return; 
    var elElement = elements[0]; 
    var elContainer = elElement.parentNode; 
    elContainer.removeChild(elElement); 
} 

最後のLIを削除したい場合は、このようにすることができます。

function removeItem(e) { 
    var elements= document.getElementsByTagName("li"); 
    if (elements.length==0) return; 
    var elElement = elements[elements.length-1]; 
    var elContainer = elElement.parentNode; 
    elContainer.removeChild(elElement); 
}