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)

我想在单击删除按钮时删除新旧项目。它将自动从列表中删除我按下的那个

这是我的输出 [请访问此处] https://jsfiddle.net/noyon_ahmed/cfb5juk3/1/

Answer 1

您不能删除第一项，因为

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

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

为您的删除按钮提供一个类-例如“删除”-并将其重写为

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

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

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

应该使您的代码正常工作。

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

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

提琴here

Answer 4

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

const addNewItem = text => {

    //... trimmed

    li.textContent = text

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

   // ... trimmed
}

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

4 个答案: