• 欢迎访问1024小神,一个只会Python的程序猿不是一个好司机
  • 有什么想对我说的可以在留言板里给我留言哦~
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏1024小神吧

JQuery:JQuery删除元素

JS/JQ/Vue 1024小神 11个月前 (12-04) 234次浏览 0个评论

JQuery:删除元素
通过 jQuery,可以很容易地删除已有的 HTML 元素、删除元素/内容。
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
remove() – 删除被选元素(及其子元素)
empty()  – 从被选元素中删除子元素
1、jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素。
实例:$(“#div1”).remove();
代码如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>JQuery的使用!!!</title>
    <script src="jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function(){
            //删除div元素
            $("button").click(function(){
                $("#div").remove();
            });
        });
    </script>
</head>
<body>
    <div  >
        这是div中的一些文本
        <p>这是div中一行段落</p>
        <p>这是div中另一行段落</p>
    </div><br>
    <button>删除div元素</button>
</body>
</html>

 

2、jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素。
实例:$(“#div1”).empty();
代码如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>JQuery的使用!!!</title>
    <script src="jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function(){
            //清空div元素
            $("button").click(function(){
                $("#div").empty();
            });
        });
    </script>
</head>
<body>
    <div  >
        这是div中的一些文本
        <p>这是div中一行段落</p>
        <p>这是div中另一行段落</p>
    </div><br>
    <button>清空div元素</button>
</body>
</html>

 

3、过滤被删除的元素
jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 的所有 <p> 元素:
实例:$(“p”).remove(“.italic”);
代码如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>JQuery的使用!!!</title>
    <script src="jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function(){
            //移除所有的p元素
            $("button").click(function(){
                $("p").remove(".italic");
            });
        });
    </script>
</head>
<body>
    <div  >
        这是div中的一些文本
        <p >这是div中一行段落</p>
        <p >这是div中另一行段落</p>
    </div><br>
    <button>移除所有的p元素</button>
</body>
</html>

  


如有失效,请留言告知丨转载请注明原文链接:JQuery:JQuery删除元素
点赞 (0)

您必须 登录 才能发表评论!