Rumah >hujung hadapan web >tutorial js >Bagaimana untuk mengalih keluar elemen anak terakhir dalam jQuery?
Bagaimana untuk mengalih keluar elemen anak terakhir dalam jQuery?
- WBOYasal
- 2024-02-19 21:40:24906semak imbas
jQuery ialah perpustakaan JavaScript popular yang digunakan untuk memudahkan banyak tugas dalam pembangunan web, termasuk manipulasi DOM. Dalam pembangunan web, selalunya perlu untuk menambah, memadam, mengubah suai dan menyemak elemen DOM, dan memadam sub-elemen terakhir juga merupakan keperluan biasa. Artikel ini akan memperkenalkan beberapa kaedah untuk memadam elemen anak terakhir menggunakan jQuery.
Kaedah 1: Gunakan kaedah last()last()方法
jQuery提供了last()方法，可以选取当前查询结果的最后一个元素。通过结合这个方法和remove()方法，可以删除最后一个子元素。
<!DOCTYPE html>
<html>
<head>
<title>删除最后一个子元素示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="parent">
<div>子元素1</div>
<div>子元素2</div>
<div>子元素3</div>
</div>
<button id="deleteBtn">删除最后一个子元素</button>
<script>
$(document).ready(function(){
$('#deleteBtn').click(function(){
$('#parent').children().last().remove();
});
});
</script>
</body>
</html>在上面的代码中，通过点击按钮触发deleteBtn的click事件，jQuery会选取parent元素的所有子元素中的最后一个并删除之。
方法二：使用:last-child选择器
除了使用last()方法，还可以使用jQuery提供的选择器:last-child选取最后一个子元素，然后调用remove()方法来删除。
<!DOCTYPE html>
<html>
<head>
<title>删除最后一个子元素示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="parent">
<div>子元素1</div>
<div>子元素2</div>
<div>子元素3</div>
</div>
<button id="deleteBtn">删除最后一个子元素</button>
<script>
$(document).ready(function(){
$('#deleteBtn').click(function(){
$('#parent :last-child').remove();
});
});
</script>
</body>
</html>上述代码中，也是通过点击按钮触发事件，选取parent
last(), yang boleh memilih elemen terakhir hasil pertanyaan semasa. Dengan menggabungkan kaedah ini dengan kaedah remove(), elemen anak terakhir boleh dialih keluar. rrreee
Dalam kod di atas, dengan mengklik butang untuk mencetuskan peristiwa klikdeleteBtn, jQuery akan memilih yang terakhir daripada semua elemen anak elemen parent dan memadamkannya . Kaedah 2: Gunakan pemilih :last-child 🎜🎜Selain menggunakan kaedah last(), anda juga boleh menggunakan selector :last- anak disediakan oleh jQuery Pilih elemen anak terakhir dan panggil kaedah remove() untuk memadamkannya. 🎜rrreee🎜Dalam kod di atas, acara juga dicetuskan dengan mengklik butang, memilih elemen anak terakhir elemen Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar elemen anak terakhir dalam jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!