Question

我是网络开发的新手。我正在学习JS，在玩一些代码时，我只使用了DOM制作了一个简单的待办事项。

我无法从逻辑列表中删除项目。我正在穿越doms并使用类似的方法; 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

迭代所有按钮
添加事件监听器
遍历列表容器并单击

＆＃13;

./jenkins_cli.sh localhost/ list-jobs | xargs -L1 echo

＆＃13;

xargs

＆＃13;

Answer 2

说明在评论中：

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);
  });
});

还通过添加结束范围标记来修复HTML中的最后一个li：

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

Answer 3

由于您计划将项目添加到列表中，我建议您使用事件委派。天真的实现应该适用于您的结构。

＆＃13;

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()
  }
  
})

＆＃13;

<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>

＆＃13;

使用DOM从列表中删除项目

3 个答案: