zoukankan      html  css  js  c++  java
  • jQuery 删除HTML元�

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

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

    jQuery的remove()方法也支持一个參数,能够用于过滤一些须要删除的HTML元素。这个參数能够为不论什么有效的jQuery selector.
    比方以下代码仅仅删除class=”italic”的<p>元素:

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


  • 相关阅读:
    npm镜像切换
    vue组件样式覆盖问题-module
    实现微信小程序多文件同时上传,并且携带参数
    提交现有代码到gitee
    富文本框 字段存入数据库
    js动态添加 <select>标签disable属性
    validate验证,rules属性名为特殊属性名
    springboot themleaf ajax总结
    th:field,th:value
    直接在页面上显示当前年份
  • 原文地址:https://www.cnblogs.com/hrhguanli/p/3929936.html
Copyright © 2011-2022 走看看