jQuery 入门教程(15): 删除HTML元素

ゝ一纸荒年。 2023-10-16 19:04 21阅读 0赞

jQuery使用下面两个方法来删除或是清空某个HTML元素。

*  remove() – 删除指定的元素（包括其子元素）
 *  empty() – 清空指定元素的子元素

例如：

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.  <meta charset="utf-8">
5.  <title>JQuery Demo</title>
6.  <script src="scripts/jquery-1.9.1.js"></script>
7.  <script>
8.  $(document).ready(function () \{
9.  $("button").click(function () \{
10. $("\#div1").remove();
11. \});
12. \});
13. </script>
14. </head>
15. <body>
16. 
17. <div id="div1" style="height: 100px; width: 300px;
18. border: 1px solid black; background-color: yellow;">
19. This is some text in the div.
20. <p>This is a paragraph in the div.</p>
21. <p>This is another paragraph in the div.</p>
22. 
23. </div>
24. <br>
25. <button>Remove div element</button>
26. 
27. </body>
28. </html>

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Demo</title>
        <script src="scripts/jquery-1.9.1.js"></script>
        <script>
            $(document).ready(function () {
                $("button").click(function () {
                    $("#div1").remove();
                });
            });
        </script>
    </head>
    <body>
    
        <div id="div1" style="height: 100px; width: 300px;
            border: 1px solid black; background-color: yellow;">
            This is some text in the div.
            <p>This is a paragraph in the div.</p>
            <p>This is another paragraph in the div.</p>
    
        </div>
        <br>
        <button>Remove div element</button>
    
    </body>
    </html>

[![20130309005][]][20130309005]

empty() 示例：

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.  <meta charset="utf-8">
5.  <title>JQuery Demo</title>
6.  <script src="scripts/jquery-1.9.1.js"></script>
7.  <script>
8.  $(document).ready(function () \{
9.  $("button").click(function () \{
10. $("\#div1").empty();
11. \});
12. \});
13. </script>
14. </head>
15. <body>
16. 
17. <div id="div1" style="height: 100px; width: 300px;
18. border: 1px solid black; background-color: yellow;">
19. This is some text in the div.
20. <p>This is a paragraph in the div.</p>
21. <p>This is another paragraph in the div.</p>
22. 
23. </div>
24. <br>
25. <button>Empty the div element</button>
26. 
27. </body>
28. </html>

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Demo</title>
        <script src="scripts/jquery-1.9.1.js"></script>
        <script>
            $(document).ready(function () {
                $("button").click(function () {
                    $("#div1").empty();
                });
            });
        </script>
    </head>
    <body>
    
        <div id="div1" style="height: 100px; width: 300px;
            border: 1px solid black; background-color: yellow;">
            This is some text in the div.
            <p>This is a paragraph in the div.</p>
            <p>This is another paragraph in the div.</p>
    
        </div>
        <br>
        <button>Empty the div element</button>
    
    </body>
    </html>

[![20130309006][]][20130309006] jQuery的remove()方法也支持一个参数，可以用于过滤一些需要删除的HTML元素。这个参数可以为任何有效的jQuery selector.  
比如下面代码只删除class=”italic”的<p>元素：

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("p").remove(".italic");

[view plain]: http://blog.csdn.net/mapdigit/article/details/8673106#
[20130309005]: http://www.imobilebbs.com/wordpress/wp-content/uploads/2013/03/20130309005.png
[20130309006]: http://www.imobilebbs.com/wordpress/wp-content/uploads/2013/03/20130309006.png