DOMを使用してリストからアイテムを削除する

Question

ウェブ開発は初めてです。私はJSを学んでいますが、いくつかのコードで遊んでいる間、私はDOMを使っているだけで簡単なアプリを作っていました。

リストからアイテムを削除するには論理的な権利が得られません。私はドムズを横断して、次のような方法を使用しています。 parentNode、removeChildを実行します。私はこれまで、n：last-childセレクタを使ってリストから最後のアイテムを削除する別の方法をテストしましたが、アイテムを個別に削除する方法が見つからないようです。

HTML：

<ul> 
    <li>grapes<span><button class="removeBtn">Remove</button></span></li> 
    <li>amethyst<span><button class="removeBtn">Remove</button></li> 
    <li>lavender<span><button class="removeBtn">Remove</button></li> 
    <li>plums<span><button class="removeBtn">Remove</button></li> 
</ul> 

JS：

const listDiv   = document.querySelector('.listDiv'), 
     hideBtn   = document.querySelector('#hideBtn'), 
     addItemBtn  = document.querySelector('button.addItemBtn'), 
     addItemInput = document.querySelector('input.addItemInput'), 
     removeListBtn = document.querySelector('button.removeListBtn'), 
     removeToDo  = document.querySelectorAll('.removeBtn'), 
     li    = document.querySelectorAll('li'), 
     list   = document.querySelector('ul'); 

//adding an item to list 
    addItemBtn.addEventListener('click',() => { 
     let list = document.querySelector('ul'), 
      newItem = document.createElement('li'); 
     newItem.textContent = addItemInput.value; 
     if (addItemInput.value !== ''){ 
      list.appendChild(newItem); 
      addItemInput.value = ''; 
     } 
    }) 


//remove last item 
    removeListBtn.addEventListener('click',() => { 
     let list = document.querySelector('ul'), 
     lastItem = document.querySelector('li:last-child'); 
     list.removeChild(lastItem); 
    }) 


//delete a list item 
    removeToDo.addEventListener('click',() =>{ 
     list.removeChild(li); 
    }); 

私はそれはひどい見えますけど、私はただ、DOMで自分のスキルをアップ磨くと削除ボタンを達成するための方法を見つけるために探しています機能性。助言がありますか？イベントリスナー

を追加

Answer 1

1. 反復すべてオーバーのボタンがリストコンテナまで横断し、クリック

var deletes = document.querySelectorAll('.removeBtn') 
 
// Iterate all nodes 
 
deletes.forEach(btn => { 
 
    // Attach event listener. Note to preserve the button this-reference 
 
    // by using the non-shorthand function 
 
    btn.addEventListener('click', function() { 
 
    var li = this.parentNode 
 
    li.remove() 
 
    }) 
 
})

<ul> 
 
    <li>one<button class="removeBtn">Delete</button> 
 
    <li>two<button class="removeBtn">Delete</button> 
 
</ul>

Answer 2

説明にそれぞれの子を削除しますthにあるEのコメント：私はイベントの委任を使用することをお勧めいたしますやるリストに項目を追加することを計画しているので

<li>plums<span><button class="removeBtn">Remove</button></span></li> 

Answer 3

：

const listDiv = document.querySelector('.listDiv'), 
    hideBtn = document.querySelector('#hideBtn'), 
    addItemBtn = document.querySelector('button.addItemBtn'), 
    addItemInput = document.querySelector('input.addItemInput'), 
    //it is a NodeList 
    removeToDos = document.querySelectorAll('.removeBtn'), 
    //list of items, 
    ul = document.querySelector('ul'); 


//because we have NodeList we have iterate over its values 
removeToDos.forEach(function(removeTodo){ 
    //add event listener on each dom element 
    removeTodo.addEventListener("click", function(){ 
    console.log(removeTodo.parentNode.parentNode); 
    //get a reference to li closest to the button clicked 
    const li = removeTodo.parentNode.parentNode; 
    //remove child by: parent.removeChild(child); syntax 
    ul.removeChild(li); 
    }); 
}); 

も閉じspanタグを追加することにより、HTMLの最後のLiを修正。ナイーブな実装は、あなたの構造のために動作するはずです。 `NodeList`を返しquerySelectorAll`

const removeToDo  = document.querySelectorAll('.removeBtn'), 
 
     list   = document.querySelector('ul'); 
 

 
// find closest el including el itself that matches selector 
 
const closest = (el, selector) => { 
 
    while(el && !el.matches(selector)) { 
 
    el = el.parentNode 
 
    } 
 
    
 
    return el 
 
} 
 

 
// add event listener to the list itself once once 
 
list.addEventListener('click', ({ target }) => { 
 
    if(target.matches('.removeBtn')) { 
 
    closest(target, 'li').remove() 
 
    } 
 
    
 
})

<ul> 
 
    <li>grapes<span><button class="removeBtn">Remove</button></span></li> 
 
    <li>amethyst<span><button class="removeBtn">Remove</button></span></li> 
 
    <li>lavender<span><button class="removeBtn">Remove</button></span></li> 
 
    <li>plums<span><button class="removeBtn">Remove</button></span></li> 
 
</ul>