如何制作一個有效的 li 項目刪除按鈕並在創建新的 li 標簽時顯示刪除按鈕？

Question

這是代碼

<!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。 我想顯示刪除按鈕而不對每個按鈕進行編碼。 請幫助這樣做

Answer 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>

如何制作一個有效的 li 項目刪除按鈕並在創建新的 li 標簽時顯示刪除按鈕？

問題描述

1 個解決方案

解決方案1
0 2022-11-19 09:23:05

如何制作一個有效的 li 項目刪除按鈕並在創建新的 li 標簽時顯示刪除按鈕？

問題描述

1 個解決方案

解決方案1 0 2022-11-19 09:23:05

解決方案1
0 2022-11-19 09:23:05