jQuery對DOM節點進行操作(刪除節點)


1.定義和用法

  remove():用於從DOM中刪除所有匹配的元素,傳入的參數用於根據jQuery表達式來篩選元素。

  注意:remove()方法刪除某個節點之后,該節點所包含的所有后代節點將同時被刪除。該方法的返回值時一個指向已被刪除的節點的引用,以后也可以繼續使用這些元素。

<body>
    <script type="text/javascript">
        //入口函數
        $(document).ready(function(){
            // 獲取節點
            $jsh1 = $("div h1:first-child")
            // 刪除節點
            $jsh1.remove()
        })
    </script>
    <div>
        <h1>hello world</h1>
        <h1>nice</h1>
    </div>
</body>

  輸出:

 

   detach():和remove()方法一樣,也是刪除DOM中匹配的元素,但是這個方法不會把匹配的元素從jQuery對象中刪除,因此,在將來仍然可以使用這些匹配的元素。與remove()不同的是,所有綁定的時間或附加的數據都會保留下來。

  示例:

<body>
    <script type="text/javascript">
        //入口函數
        $(document).ready(function(){
            // 獲取節點
            $jsh1 = $("div h1:first-child")
            // 刪除節點
            $jsh1.detach()
        })
    </script>
    <div>
        <h1>hello world</h1>
        <h1>nice</h1>
    </div>
</body>

  輸出:

  empty():該方法並不是刪除節點,而是將節點清空,該方法可以清空元素中的所有的后代節點

  示例:

<body>
    <script type="text/javascript">
        //入口函數
        $(document).ready(function(){
            // 獲取節點
            $jsh1 = $("div h1:first-child")
            // 刪除節點子元素
            $jsh1.empty()
        })
    </script>
    <div>
        <h1>hello world</h1>
        <h1>nice</h1>
    </div>
</body>

 

  輸出:

 


免責聲明!

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



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