JS之刪除元素案例
阿新 • • 發佈：2022-05-23
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head>
<body> <button>刪除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光頭強</li> </ul> <script> // 1.獲取元素 var ul = document.querySelector('ul'); var btn = document.querySelector('button'); // 2. 刪除元素 node.removeChild(child) // ul.removeChild(ul.children[0]); // 3. 點選按鈕依次刪除裡面的孩子 btn.onclick = function() { if (ul.children.length == 0) { this.disabled = true; } else { ul.removeChild(ul.children[0]); } } </script> </body>
</html>
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head>
<body> <button>刪除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光頭強</li> </ul> <script> // 1.獲取元素 var ul = document.querySelector('ul'); var btn = document.querySelector('button'); // 2. 刪除元素 node.removeChild(child) // ul.removeChild(ul.children[0]); // 3. 點選按鈕依次刪除裡面的孩子 btn.onclick = function() { if (ul.children.length == 0) { this.disabled = true; } else { ul.removeChild(ul.children[0]); } } </script> </body>
</html>