masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

pemadaman nod DOM jQuery

Alih keluar, seperti kosong, ialah kaedah mengalih keluar elemen, tetapi alih keluar akan mengalih keluar elemen itu sendiri dan segala-galanya di dalam elemen, termasuk peristiwa terikat dan data jQuery yang berkaitan dengan elemen.

Sebagai contoh, untuk nod, ikat acara klik

<div class="hello">
    <p>php中文网</p>
</div>
$('.hello').on("click",fn)

Sebenarnya sangat mudah untuk memadamkan nod ini tanpa menggunakan kaedah alih keluar, tetapi pada masa yang sama, acara itu perlu dimusnahkan. Ini adalah untuk mengelakkan "kebocoran memori" ", jadi pembangun bahagian hadapan mesti memberi perhatian kepada berapa banyak acara yang terikat dan ingat untuk memusnahkannya apabila tidak digunakan

Keluarkan div dan semua elemen di dalamnya melalui kaedah alih keluar. Kaedah pemusnahan acara akan dikendalikan secara automatik di dalam keluarkan, jadi sangat mudah digunakan 

//通过remove处理
$('.hello').remove()
//结果：<div class="hello"><p>php中文网</p></div> 全部被移除
//节点不存在了,同事事件也会被销毁

alih keluar parameter ekspresi:

Kelebihan alih keluar daripada kosong ialah anda boleh lulus ungkapan pemilih untuk menapis set elemen padanan yang akan dialih keluar Anda boleh memadamkan nod yang ditentukan secara selektif

Kami boleh memilih kumpulan elemen yang sama melalui $(), dan kemudian lulus peraturan penapisan melalui alih keluar. (), dengan itu memproses

seperti ini Bandingkan kod di Kawasan yang betul, kita boleh memprosesnya seperti ini 

$("p").filter(":contains('3')").remove()

Mari kita tulis kod contoh di bawah, kawan-kawan, mari kita lihat apa kesannya. 

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .test1 {
        background: #bbffaa;
    }
    
    .test2 {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>通过jQuery remove方法移除元素</h2>
    <div class="test1">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <div class="test2">
        <p>p元素3</p>
        <p>p元素4</p>
    </div>
    <button>点击通过jQuery的empty移除元素</button>
    <button>点击通过jQuery的empty移除指定元素</button>
    <script type="text/javascript">
    $("button:first").on('click', function() {
        //删除整个 class=test1的div节点
        $(".test1").remove()
    })

    $("button:last").on('click', function() {
        //找到所有p元素中，包含了3的元素
        //这个也是一个过滤器的处理
        $("p").remove(":contains('3')")
    })
    </script>
</body>

</html>


Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style> .test1 { background: #bbffaa; } .test2 { background: yellow; } </style> </head> <body> <h2>通过jQuery remove方法移除元素</h2> <div class="test1"> <p>p元素1</p> <p>p元素2</p> </div> <div class="test2"> <p>p元素3</p> <p>p元素4</p> </div> <button>点击通过jQuery的empty移除元素</button> <button>点击通过jQuery的empty移除指定元素</button> <script type="text/javascript"> $("button:first").on('click', function() { //删除整个 class=test1的div节点 $(".test1").remove() }) $("button:last").on('click', function() { //找到所有p元素中，包含了3的元素 //这个也是一个过滤器的处理 $("p").remove(":contains('3')") }) </script> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492413 permainan