如何从未排序列表中“删除”项目

Question

我正在做一个简单的“待办事项”项目。 现在我面临一个问题，即从无序列表中删除的项目。我无法从列表中删除项目。

这是我的HTML代码

这里是默认的三个列表项

 <!-- *** InputField and Add Button *** -->
    <div>
        <input type="text", placeholder="Write Something Here">
        <button class="addButton">Add New Item</button>
    </div>

    <!-- *** List Items *** -->
    <div>
        <ul>
            <li>
                hello
                <button>Delete</button>
                <button>Edit</button>
            </li>
            <li>
                hello2
                <button>Delete</button>
                <button>Edit</button>
            </li>
            <li>
                hello3
                <button>Delete</button>
                <button>Edit</button>
            </li>
        </ul>
    </div>



    <script src="./index.js"></script>

我可以在 ul 列表中添加新项目。 此外，我可以通过该代码删除列表的第一项，但我无法从列表中删除更多项目。

这是我的js代码

// Input field and Add Button
let input = document.querySelector('input')
let addBtn = document.querySelector('.addButton')

// List Items
let ul = document.querySelector('ul')
let li = document.querySelectorAll('li')

// List Button
let deleteBtn = document.querySelectorAll('button')[1]
let editBtn = document.querySelectorAll('button')[2]


// Add New Item
let addNewItem = function () {
    // Create New Item
    let li = document.createElement('li')
    let deleteBtn = document.createElement('button')
    let editBtn = document.createElement('button')

    // Button Need to modify
    deleteBtn.innerText = 'Delete'
    editBtn.innerText = 'Edit'

    // Appending buttons to LI
    li.innerText = input.value
    li.appendChild(deleteBtn)
    li.appendChild(editBtn)

    // Append LI to UL
    ul.appendChild(li)

    //Clear The Input Field
    input.value = ''

}

// Set Add button to add new item
addBtn.addEventListener('click', addNewItem)


**i tried to delete item from ul list by that code**
// Delete new or old Items From list 
let deleteItem = function () {

    let li = this.parentNode
    ul.removeChild(li)

}

deleteBtn.addEventListener('click', deleteItem)

单击删除按钮时，我想删除新旧项目。 它会自动从我按下的列表中删除

这是我的output [请访问这里] https://jsfiddle.net/noyon_ahmed/cfb5juk3/1/

Answer 1

您不能删除超过第一个项目，因为

let deleteBtn = document.querySelectorAll('button')[1]

指向文档中的第二个按钮元素。

给你的删除按钮一个 class - 例如“删除” - 并将上面的内容重写为

let deleteBtn = [...document.getElementsByClassName('delete')]

然后将点击处理程序的附件更改为

deleteBtn.forEach(b => b.addEventListener('click', deleteItem))

应该使您的代码工作。

如果您希望新添加的项目具有该行为，则需要在 addNewItem function 中创建相应的删除按钮时附加处理程序，例如：

    // Appending buttons to LI
    li.innerText = input.value
    deleteBtn.onclick = deleteItem
    li.appendChild(deleteBtn)
    li.appendChild(editBtn)

Answer 2

您需要进行两项更改。

确保在开始时将事件侦听器添加到所有按钮：

// List Button
let deleteBtns = document.querySelectorAll('button');

// ...

for (var i = 0;i<deleteBtns.length;i++) {
    deleteBtns[i].addEventListener('click', deleteItem)
}

添加新项目时，请务必添加事件侦听器：

// Append LI to UL
ul.appendChild(li)

//Clear The Input Field
input.value = '';

// add this: 
deleteBtn.addEventListener('click', deleteItem);

Answer 3

您应该相应地更新您的代码

<ul>
   <li>
       hello
       <button class="delete">Delete</button>
       <button>Edit</button>
    </li>
    <li>
        hello2
        <button class="delete">Delete</button>
        <button>Edit</button>
     </li>
     <li>
          hello3
        <button class="delete">Delete</button>
        <button>Edit</button>
      </li>
 </ul>
let deleteBtn = document.querySelectorAll('button.delete')


deleteBtn.forEach(b => b.addEventListener('click', deleteItem))

在这里提琴

Answer 4

只是一般提示，我不会在标签名称上使用 select。 这样做可能最终会干扰将来添加的新 HTML，例如导航项列表。 为每个列表项指定一个特定的 class 名称，例如todoListItem和 select ，而不是使用querySelectorAll('.todoListItem') 。 我还认为，如果您从一个空列表开始并根据数据填充它，这会更容易。 换句话说，通过您的 addNewItem function 运行所有内容。 然后，如果您将事件侦听器添加到此 scope 中的删除按钮，它应该仅适用于当前项目。

const addNewItem = text => {

    //... trimmed

    li.textContent = text

    deleteBtn.addEventListener('click',
      () => li.remove())

   // ... trimmed
}