html 如何创建一个工作li项的删除按钮，并在创建新li标签时显示该删除按钮？

tp5buhyn 于 2022-11-20 发布在其他

关注(0)|答案(1)|浏览(170)

以下是代码

<!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。我想显示删除按钮，而不需要为每个标签编写代码。请帮助我完成这个任务

Html

来源：https://stackoverflow.com/questions/74498757/how-to-make-a-working-li-item-delete-button-and-display-the-delete-button-whenev

1条答案

按热度按时间

wmomyfyw1#

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

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

测试代码
第一次

赞(0）回复(0）举报 2022-11-20

我来回答

html 如何创建一个工作li项的删除按钮，并在创建新li标签时显示该删除按钮？

1条答案

相关问题

热门标签

最新问答