夜光带你走进Jquery（十四）擅长的领域

最新推荐文章于 2019-12-03 19:46:59 发布

GeniusTeam-夜光

最新推荐文章于 2019-12-03 19:46:59 发布

阅读量327

点赞数

分类专栏： Genius-Jquery

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102681104

版权

Genius-Jquery 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

夜光序言：

一杯香茗，任岁月荏苒，落花成冢，独守一份清静

寂寞在心尖的边缘躁动，悠然品茗静谧韵味。

轻轻的推开紫纱轩窗，清风柔柔地将思绪挑逗，伸手，掬起一捧月色，吟唱一首离殇婉约的诗词

正文：

jQuery - 删除元素

通过 jQuery，可以很容易地删除已有的 HTML 元素。

删除元素/内容

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

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

jQuery remove() 方法

jQuery remove() 方法删除被选元素及其子元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.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;">

    嗯唔~~  这是 div 中的一些文本。
    <p>这是在 div 中的一个段落。</p>
    <p>这是在 div 中的另外一个段落。</p>

</div>
<br>
<button>移除div元素</button>

</body>
</html>

嗯唔~~ jQuery empty() 方法

jQuery empty() 方法删除被选元素的子元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#div1").empty();
            });
        });
    </script>
</head>
<body>

<div id="div1" style="height:200px;width:300px;border:1px solid black;background-color:yellow;">

    嗯唔，这是 div 中的一些文本，只清除文本。
    <p>这是在 div 中的一个段落。</p>
    <p>这是在 div 中的另外一个段落。</p>

</div>
<br>
<button>清空div元素</button>

</body>
</html>

嗯唔~~ 过滤被删除的元素

jQuery remove() 方法也可接受一个参数

允许我们对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p> 元素：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").remove(".italic");
            });
        });
    </script>
</head>
<body>

<p>这是一个段落。</p>
<p class="italic"><i>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<button>很帅气~~     移除所有  class="italic" 的 p 元素。</button>

</body>
</html>