jQuery技术

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

字号+ 作者:H5之家 来源:H5之家 2016-11-26 16:00 我要评论( )

jQuery使用下面两个方法来删除或是清空某个HTML元素。 remove() 删除指定的元素(包括其子元素) empty() 清空指定元素的子元素 例如: !DOCTYPE htmlhtmlheadmeta charset=utf-8titleJQuery Demo/titlescript src=scripts/jquery-1.9.1.js/scriptscript$(do

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

  • remove() – 删除指定的元素(包括其子元素)
  • empty() – 清空指定元素的子元素
  • 例如:

    <!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

    empty() 示例:

    <!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

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

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

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 十个迅速提升JQuery性能的技巧

      十个迅速提升JQuery性能的技巧

      2016-11-26 17:00

    • jQuery 入门教程(26): jQuery UI Button示例(一)

      jQuery 入门教程(26): jQuery UI Button示例(一)

      2016-11-26 15:00

    • Jquery通过ajax请求NodeJS返回json数据实例

      Jquery通过ajax请求NodeJS返回json数据实例

      2016-11-26 14:37

    • 廖雪峰的官方网站

      廖雪峰的官方网站

      2016-11-23 16:06

    网友点评
    >