Jquery 删除元素

write at 2019/6/14 22:53

1. 介绍¶

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

2. 案例¶

2.1 remove empty¶

清空/删除元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #div1 {
            background-color: red;
            width: 100px;
            height: 150px;
        }

        #div2 {
            background-color: yellow;
            width: 100px;
            height: 150px;
        }
    </style>
</head>
<body>
<div id="div1">
    <p>hello caimengzhi</p>
    <p>hello python</p>
    <p>hello jquery</p>
</div>
<hr>
<div id="div2">
    <p>hello caimengzhi</p>
    <p>hello python</p>
    <p>hello jquery</p>
</div>
<button id="btn1">删除数据</button>
<button id="btn2">清空数据</button>
</body>
<script>
    $(function () {
        $('#btn1').click(function () {
            $('#div1').remove()
        });
        $('#btn2').click(function () {
            $('#div2').empty()
        });
    })
</script>
</html>

注意

过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素：
$("p").remove(".italic");