JavaScript刪除元素


在JavaScript中,我們可以通過removeChild()方法來刪除父元素下的某個子元素。

刪除最后一個子元素   代碼:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>刪除元素</title>
<script>
window.onload = function (){
let oBtn =document.getElementById("btn");

//為按鈕添加點擊事件
oBtn.onclick = function (){
let oUl = document.getElementById("list");
//刪除最后一個子元素
oUl.removeChild(oUl.lastElementChild);
}
}
</script>
</head>
<body>
<ul id="list">
<li>張若昀</li>
<li>任嘉倫</li>
<li>王一博</li>
<li>王俊凱</li>
<li>蔡徐坤</li>
</ul>
<input id="btn" type="button" value="刪除">
</body>
</html>
運行結果:

 

 
        

 點擊刪除后:

 

 最后一個子元素蔡徐坤被刪掉了

 
        
刪除整個列表代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>刪除元素</title>
<script>
window.onload = function (){
let oBtn =document.getElementById("btn");

//為按鈕添加點擊事件
oBtn.onclick = function (){
let oUl = document.getElementById("list");
//整個列表刪除
document.body.removeChild(oUl);
}
}
</script>
</head>

<body>
<ul id="list">
<li>張若昀</li>
<li>任嘉倫</li>
<li>王一博</li>
<li>王俊凱</li>
<li>蔡徐坤</li>
</ul>
<input id="btn" type="button" value="刪除">
</body>
</html>
運行結果:

 

 
        

 點擊刪除后:

 

 整個列表被刪除了

 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM