删除和隐藏元素

心已赠人 2022-02-02 12:47 250阅读 0赞

## 删除id为div1的元素 ##

$("\#div1").remove();

## 删除 class=“italic” 的所有  元素： ##

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

## 控制元素的隐藏和显示的几种方法。 ##

使用jquery控制div的显示与隐藏，一句话就能搞定，例如：  
1.$("\#id").show()表示为display：block，  
KaTeX parse error: Expected 'EOF', got '\#' at position 3: ("\#̲id").hide()表示为d…("\#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，则切换为可见的。

3.$("\#id").css(‘display’,‘none’);//隐藏  
$("\#id").css(‘display’,‘block’);//显示  
或者

$("\#id")\[0\].style.display=‘none’;

display=none 控制对象的隐藏搜索  
　　display=block控制对象的显示

4.$("\#id").css(‘visibility’,‘hidden’);//元素隐藏  
$("\#id").css(‘visibility’,‘visible’);//元素显示  
CSS visibility 属性规定元素是否可见。  
visible　元素可见。  
hidden　元素不可见。  
collapse　在表格元素中使用时，此值可删除一行或一列，但它不影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。  
inherit　从父元素继承 visibility 属性的值。  
注意：  
display:none和visible:hidden都能把网页上某个元素隐藏起来，在视觉效果上没有区别，但是在一些DOM操作中两者有区别:  
display:none —不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。  
visible:hidden— 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，即它仍然具有高度、宽度等属性，通俗来说就是看不见但摸得到。

//第1种方法 ,给元素设置style属性  
$("\#hidediv").css(“display”, “block”);

### 第2种方法 ###

给元素换class，来实现隐藏div，前提是换的class样式定义好了隐藏属性  
$("\#hidediv").attr(“class”, “blockclass”);

### 第3种通过jquery的css方法，设置div隐藏 ###

$("\#blockdiv").css(“display”, “none”);

$("\#hidediv").show();//显示div  
$("\#blockdiv").hide();//隐藏div

## 案例 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery便利多个相同的class，点击显示隐藏图标，显示及隐藏其下的内容</title>
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
        <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
     
    <style>
        body{
            background-color: #FFFFFF;
            letter-spacing: 2px;
        }
        .box{
            padding-top: 100px;
            width: 50%;
            margin: 0 auto;
        }
     
        ul li ul{
            margin: 20px 0 20px 40px;
        }
        .img_sh{
            margin: 20px 0;
        }
     
        .img_sh img{
            float: left;
            padding-right: 10px;
        }
     
    </style>
    <script>
        //页面加载完毕后加载
        window.onload = function () {
            //遍历class类名叫img_sh的li
            $(".img_sh").each(function () {
                //将遍历到的类赋给li
                var li = $(this);
                //执行操作，li的子元素p标签里的子元素类名为jia的加号图片点击后执行函数
                li.children("p").children(".jia").click(function () {
                    //点击的自身加号图片要隐藏
                    li.children("p").children(".jia").hide();
                    //点击完的加号图片要隐藏，而相反类名为jian的减号图片要显示，toggle的作用是取反（既显示或隐藏）
                    li.children("p").children(".jian").toggle();
                    //下面的ul列也是取反
                    li.children("ul").toggle();
                })
                //同理
                li.children("p").children(".jian").click(function () {
                    li.children("p").children(".jian").hide();
                    li.children("p").children(".jia").toggle();
                    li.children("ul").toggle();
                })
     
            })
        }
    </script>
     
     
    <div class="container-fluid">
        <div class="box ">
            <ul class="list-unstyled">
                <li class="img_sh">
                    <p>  
                        刘吉祥jq测试
                        <img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: none">
                        <img src="images/img02.jpg" alt="" class="img-responsive jian"  style="display: block" >
                    </p>
                    <ul class="list-unstyled"  style="display: block">
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    </ul >
                </li>
                <li class="img_sh">
                    <p>
                        刘吉祥jq测试
                        <img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: block" >
                        <img src="images/img02.jpg" alt="" class="img-responsive jian" style="display: none">
                    </p>
                    <ul class="list-unstyled"  style="display: none">
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    </ul >
                </li>
                <li class="img_sh">
                    <p>
                        刘吉祥jq测试
                        <img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: block" >
                        <img src="images/img02.jpg" alt="" class="img-responsive jian" style="display: none">
                    </p>
                    <ul class="list-unstyled"  style="display: none">
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    </ul >
                </li>
                <li class="img_sh">
                    <p>
                        刘吉祥jq测试
                        <img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: block" >
                        <img src="images/img02.jpg" alt="" class="img-responsive jian" style="display: none">
                    </p>
                    <ul class="list-unstyled"  style="display: none">
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    </ul >
                </li>
                <li class="img_sh">
                    <p>
                        刘吉祥jq测试
                        <img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: block" >
                        <img src="images/img02.jpg" alt="" class="img-responsive jian" style="display: none">
                    </p>
                    <ul class="list-unstyled"  style="display: none">
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                        <li>●&nbsp 吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮;</li>
                    </ul >
                </li>
            </ul>
        </div>
     
    </div>
    </body>
    </html>

[https://www.jb51.net/article/145446.htm][https_www.jb51.net_article_145446.htm]

[https_www.jb51.net_article_145446.htm]: https://www.jb51.net/article/145446.htm