Bagaimana untuk memadam tag html dalam jquery-tutorial js-php.cn

Bagaimana untuk memadam tag html dalam jquery

青灯夜游

Lepaskan： 2021-10-29 18:20:19

asal

4926 orang telah melayarinya

Kaedah pemadaman: 1. Gunakan kaedah remove(), sintaks "$(selector).remove()"; 2. Gunakan kaedah detach(), sintaks "$(selector).detach( )"; 3 , gunakan kaedah empty() , sintaks "$(selector).empty()".

Bagaimana untuk memadam tag html dalam jquery

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.7.2, komputer Dell G3.

Dalam jQuery, jika anda ingin memadamkan elemen, kami mempunyai 3 kaedah berikut: remove(), detach() dan empty().

kaedah remove()

Dalam jQuery, kita boleh menggunakan kaedah remove() untuk mengalih keluar elemen dan semua kandungan di dalamnya.

Sintaks: $(selector).remove()

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.7.2.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("li:nth-child(4)").remove();
            })
        })
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <input id="btn" type="button" value="删除" />
</body>
</html>

Salin selepas log masuk

Bagaimana untuk memadam tag html dalam jquery

kaedah tanggalkan( )

Dalam jQuery, walaupun fungsi detach() dan remove() adalah serupa, kedua-duanya memadamkan elemen dan semua kandungannya, tetapi terdapat perbezaan yang jelas antara keduanya. Kaedah

remove() digunakan untuk "sepenuhnya" mengalih keluar elemen. Apa yang dipanggil "lengkap" bermaksud bahawa bukan sahaja elemen akan dipadamkan, tetapi juga peristiwa yang terikat pada elemen akan dipadamkan; separuh lengkap" padamkan elemen. Apa yang dipanggil "separuh lengkap" bermaksud bahawa hanya elemen akan dipadamkan dan peristiwa yang terikat pada elemen tidak akan dipadamkan.
Sintaks:

Contoh:

$(selector).detach()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("p").detach();
});
});
</script>
</head>

<body>
<p>这是一个p元素段落</p>
<button>删除 p 元素</button>
</body>
</html>

Salin selepas log masuk

Bagaimana untuk memadam tag html dalam jquery

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(function () {
            $("li").click(function () {
                alert("欢迎来到php中文网！")
            });
            $("#btn").click(function () {
                var $li = $("li:nth-child(4)").remove();
                $($li).appendTo("ul");
            });
        })
    </script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除" />
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami menambahkan acara klik pada setiap elemen li Mengklik mana-mana elemen li akan muncul kotak dialog. Selepas kami mengklik butang [Padam], item

jQuery

Tetapi pada masa ini, jika anda mengklik item

jQuery

sekali lagi, anda akan mendapati bahawa acara klik terikat sebelum ini telah dipadamkan dan kotak dialog tidak akan muncul.

Bagaimana untuk memadam tag html dalam jquery Apabila kita menggantikan remove() dengan detach(), kita boleh mendapati bahawa apabila elemen li dipadamkan dan kemudian ditambah semula, peristiwa klik yang sebelum ini terikat pada elemen masih wujud. Untuk dua kaedah remove() dan detach(), ia boleh diringkaskan seperti ini: elemen dipadamkan dan kemudian ditambah semula Jika anda tidak mahu elemen itu mengekalkan peristiwa terikat asal, anda harus menggunakan kaedah remove(). ; Elemen mengekalkan peristiwa terikat asalnya dan harus menggunakan kaedah detach().

kaedah kosong( )

Dalam jQuery, kita boleh menggunakan kaedah kosong() untuk "mengosongkan" elemen keturunan. Sintaks:

Contoh:

$(selector).empty()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(function () {
            $("#btn").click(function () {
                $("ul li:nth-child(4)").empty();
            });
        })
    </script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除" />
</body>
</html>

Salin selepas log masuk

Tutorial video berkaitan yang disyorkan:

Tutorial jQuery Bagaimana untuk memadam tag html dalam jquery (Video)

Atas ialah kandungan terperinci Bagaimana untuk memadam tag html dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!