2017-11-23 21 views
-1

これは何か問題を解決するのに役立つものではありません。parentNodeを説明してください

私はparentNodeが何をしているのか理解していますが、自分のコードでどのように動作するかのコンテキストで私の頭を包み込むことはできません。私がコードを書くことができたのは、YouTubeのチュートリアルでした。

私はあなたが物を追加して削除することができたtodoリストアプリケーションを作成する方法を学びました。私は削除ボタンを作ったが、私が理解していないコードは、コード内でremove関数がどのように動作するかである。

私はそれがULである親からLIである子供を削除すると思っていますか?

誰かがremoveItem()関数について説明でき、そのコードが何かを理解できれば非常に感謝しています。

var input = document.getElementById('input'), 
 
button = document.getElementById('add') 
 

 
function removeItem() { 
 
    
 
    var item = this.parentNode 
 
    var parent = item.parentNode 
 
    parent.removeChild(item) 
 
    
 
    } 
 

 
button.addEventListener('click', function(e) { 
 
    var p = document.querySelector('p') 
 
    if (input.value.trim() === '') { 
 
    p.style.display = 'block' 
 
    return false 
 
    } 
 
    
 
    p.style.display = '' 
 
    
 
    var userInput = document.createTextNode(input.value) 
 
    var li = document.createElement('li') 
 
    var ul = document.getElementById('todo') 
 
    
 
    var remove = document.createElement('button') 
 
    remove.innerHTML = 'Remove' 
 

 
    remove.addEventListener('click', removeItem); 
 
    
 
    ul.insertBefore(li, ul.childNodes[0]) 
 
    li.appendChild(userInput) 
 
    li.appendChild(remove) 
 

 
})
<input type="text" id="input"/> 
 
    
 
<button id="add">Add</button> 
 

 
<p>plz add</p> 
 

 
<ul id="todo"></ul>

+2

"私はそれがULである親からのLIである子供を削除すると思っていますか?" - はい。それ以上の説明が必要ですか? – Bergi

+0

https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild –

+0

不思議なことに、コンソールログとブレークポイントを追加する必要があります:https://developers.google.com/web/tools/chrome-devtools/javascript/ – Isaac

答えて

1

あなたは正しいです。 Javascriptでノードを削除する最善の方法は、removeChild()関数を使用して親ノードから削除することです。

item.remove()のようなremove()関数を使うことができますが、IEではこの関数が別のことをするためIEでは機能しません。ドロップダウンリスト(select)からオプションを削除します。

したがって、クロスブラウザの動作を実現するには、removeChildアプローチが使用されます。

関連する問題