Rumah >hujung hadapan web >tutorial js >Contoh jQuery: Bagaimana untuk memadam elemen anak terakhir menggunakan jQuery?
Contoh jQuery: Bagaimana untuk memadam elemen anak terakhir menggunakan jQuery?
- PHPzasal
- 2024-02-20 19:45:041112semak imbas
Tajuk: jQuery Contoh: Bagaimana untuk memadam elemen anak terakhir menggunakan jQuery?
Dalam pembangunan web, kami sering menghadapi situasi di mana elemen DOM perlu dimanipulasi melalui JavaScript. Sebagai perpustakaan JavaScript yang digunakan secara meluas, jQuery menyediakan banyak kaedah mudah untuk memanipulasi elemen DOM. Artikel ini akan menggunakan contoh untuk memperkenalkan cara menggunakan jQuery untuk memadam elemen anak terakhir dan memberikan contoh kod terperinci.
Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam fail HTML. Ia boleh diperkenalkan melalui pautan CDN, atau anda boleh memuat turun fail perpustakaan jQuery dan memperkenalkannya ke dalam projek. Seterusnya, cipta elemen induk dengan elemen anak dalam HTML supaya kami boleh menunjukkan cara mengalih keluar elemen anak terakhir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery删除最后一个子元素</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="parentElement">
<div>子元素1</div>
<div>子元素2</div>
<div>子元素3</div>
<div>子元素4</div>
</div>
<button id="deleteButton">删除最后一个子元素</button>
<script>
$(document).ready(function(){
$("#deleteButton").click(function(){
$("#parentElement").children().last().remove();
});
});
</script>
</body>
</html>Dalam kod di atas, kami mula-mula mencipta div elemen induk yang mengandungi berbilang elemen anak dan menambah butang di belakangnya. Apabila pengguna mengklik butang, elemen anak terakhir dipadamkan melalui fungsi mendengar acara klik jQuery. click事件监听函数，执行删除最后一个子元素的操作。
在click事件的处理函数中，通过选择器$("#parentElement")找到父元素div，并利用children().last().remove()
klik, cari div elemen induk melalui pemilih $("#parentElement") dan gunakan children(). last( ).remove() untuk memadamkan elemen anak terakhir div ini. Melalui contoh kod ini, kami telah melaksanakan fungsi menggunakan jQuery untuk memadam elemen anak terakhir. Dalam pembangunan sebenar, anda boleh mengubah suai dan melanjutkan kod ini mengikut keperluan dan situasi tertentu untuk mencapai operasi DOM yang lebih kompleks. Ringkasan: Artikel ini memperkenalkan cara menggunakan jQuery untuk memadam elemen anak terakhir melalui contoh mudah dan menunjukkan proses pelaksanaan secara terperinci melalui contoh kod. Saya harap artikel ini dapat membantu pembaca lebih memahami dan menggunakan kaedah dalam perpustakaan jQuery dan meningkatkan kecekapan pembangunan bahagian hadapan. 🎜Atas ialah kandungan terperinci Contoh jQuery: Bagaimana untuk memadam elemen anak terakhir menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!