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

debugcn 发表于 Dev

SA 诺永艾哈迈德

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

这是我的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/

其他夜晚

您不能删除多于第一项的内容，因为

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)

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。