elemen padam jQ...LOGIN

elemen padam jQuery

Elemen HTML sedia ada boleh dipadamkan dengan mudah dengan jQuery.


Padam elemen/kandungan

Untuk memadamkan elemen dan kandungan, anda boleh menggunakan dua kaedah jQuery berikut secara amnya:

  • remove() - mengalih keluar elemen yang dipilih (dan elemen anaknya)

  • empty() - mengalih keluar elemen anak daripada elemen yang dipilih


kaedah jQuery remove()

kaedah jQuery remove() mengalih keluar elemen yang dipilih dan elemen anaknya.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/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>

Jalankan atur cara dan cuba


kaedah jQuery empty()

kaedah jQuery empty() dipadamkan Elemen anak bagi elemen yang dipilih.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/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:100px;width:300px;border:1px solid black;background-color:yellow;">
这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>
</div>
<br>
<button>清空div元素</button>
</body>
</html>

Jalankan program dan cuba


Tapis elemen yang dipadam

Kaedah jQuery remove() juga boleh digunakan Menerima parameter yang membolehkan anda menapis elemen yang dipadam.

Parameter ini boleh menjadi sebarang sintaks pemilih jQuery.

Contoh berikut mengalih keluar semua <p> elemen class="italic":

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/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>这是class="italic"的段落。</i></p>
<p class="italic"><i>这是class="italic"的段落。</i></p>
<button>移除所有  class="italic" 的 p 元素。</button>
</body>
</html>

Jalankan program untuk mencubanya


bahagian seterusnya
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/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:100px;width:300px;border:1px solid black;background-color:yellow;"> 这是 div 中的一些文本。 <p>这是在 div 中的一个段落。</p> <p>这是在 div 中的另外一个段落。</p> </div> <br> <button>清空div元素</button> </body> </html>
babperisian kursus