如何制作一个有效的 li 项目删除按钮并在创建新的 li 标签时显示删除按钮？答案

【问题标题】：How to make a working li item delete button and display the delete button whenever the new li tag is created?如何制作一个有效的 li 项目删除按钮并在创建新的 li 标签时显示删除按钮？
【发布时间】：2022-11-19 18:44:42
【问题描述】：

这是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>INDEX</title>
    <style>
        .unordered li{
            float:left;
            margin: 10px;
            list-style: none;
        }
        .unordered button{
            background: lightcoral;
            outline: none;
            border: none;
            width: 70px;
            height: 30px;
        }
        .unordered button:hover{
            background: rgb(231, 85, 85);
        }
    </style>
</head>
<body>
    <h1>INDEX</h1>
          <ul class="unordered">
             <li>Coffee <button>delete</button></li>
             <li>Tea <button>delete</button></li>
             <li>Milk <button>delete</button></li>
             <li>Coffee <button>delete</button></li>
             <li>Tea <button>delete</button></li>
             <li>Milk <button>delete</button></li>
             <li>Coffee <button>delete</button></li>
             <li>Tea <button>delete</button></li>
             <li>Milk <button>delete</button></li>
         </ul>
</body>
</html>

我只想创建一个网站，每当我创建一个新的 li 标签时，都会显示一个带有 li 的删除按钮，当我单击它时，它会删除 li。我想显示删除按钮而不对每个按钮进行编码。请帮助这样做

【问题讨论】：

标签： javascript html project

【解决方案1】：

尝试使用以下代码（首先获取所有按钮，然后将 click 事件监听器添加到每个按钮）：

let buttons = document.querySelectorAll('button')
for(let i=0;i<buttons.length;i++){
  buttons[i].addEventListener('click',()=>{
    buttons[i].parentNode.remove()
  })
}

测试代码

let buttons = document.querySelectorAll('button')
for(let i=0;i<buttons.length;i++){
  buttons[i].addEventListener('click',()=>{
    buttons[i].parentNode.remove()
  })
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>INDEX</title>
    <style>
        .unordered li{
            float:left;
            margin: 10px;
            list-style: none;
        }
        .unordered button{
            background: lightcoral;
            outline: none;
            border: none;
            width: 70px;
            height: 30px;
        }
        .unordered button:hover{
            background: rgb(231, 85, 85);
        }
    </style>
</head>
<body>
    <h1>INDEX</h1>
          <ul class="unordered">
             <li>Coffee <button>delete</button></li>
             <li>Tea <button>delete</button></li>
             <li>Milk <button>delete</button></li>
             <li>Coffee <button>delete</button></li>
             <li>Tea <button>delete</button></li>
             <li>Milk <button>delete</button></li>
             <li>Coffee <button>delete</button></li>
             <li>Tea <button>delete</button></li>
             <li>Milk <button>delete</button></li>
         </ul>
</body>
</html>

【讨论】：