Java教程

JavaScript删除元素

本文主要是介绍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>
运行结果：



 




 点击删除后：




 


 整个列表被删除了


 


 

                    

                        这篇关于JavaScript删除元素的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
                    


                


                
                
 

                
                

                    

                        
您可能喜欢

                        
                    

                

                

            

             
            
            
            
        

        
        

        

            

                
栏目导航