jQuery是一個(gè)流行的JavaScript函式庫(kù)，用於簡(jiǎn)化Web開發(fā)中的許多任務(wù)，包括DOM操作。在網(wǎng)頁(yè)開發(fā)中，經(jīng)常需要對(duì)DOM元素進(jìn)行增刪改查的操作，其中刪除最後一個(gè)子元素也是常見需求。本文將介紹使用jQuery刪除最後一個(gè)子元素的幾種方法。
方法一：使用last()方法
jQuery提供了last()方法，可以選取目前查詢結(jié)果的最後一個(gè)元素。透過結(jié)合這個(gè)方法和remove()方法，可以刪除最後一個(gè)子元素。
<!DOCTYPE html>
<html>
<head>
<title>刪除最后一個(gè)子元素示例</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">刪除最后一個(gè)子元素</button>
<script>
$(document).ready(function(){
$('#deleteBtn').click(function(){
$('#parent').children().last().remove();
});
});
</script>
</body>
</html>在上面的程式碼中，透過點(diǎn)擊按鈕觸發(fā)deleteBtn的click事件，jQuery會(huì)選取parent元素的所有子元素中的最後一個(gè)並刪除之。
方法二：使用:last-child選擇器
除了使用last()方法，還可以使用jQuery提供的選擇器:last-child選取最後一個(gè)子元素，然後呼叫remove()方法來刪除。
<!DOCTYPE html>
<html>
<head>
<title>刪除最后一個(gè)子元素示例</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">刪除最后一個(gè)子元素</button>
<script>
$(document).ready(function(){
$('#deleteBtn').click(function(){
$('#parent :last-child').remove();
});
});
</script>
</body>
</html>上述程式碼中，也是透過點(diǎn)擊按鈕觸發(fā)事件，選取parent元素的最後一個(gè)子元素並刪除之。
總結(jié)：
以上便是使用jQuery刪除最後一個(gè)子元素的兩種方法，開發(fā)者可以根據(jù)實(shí)際情況選擇適合的方式來操作DOM元素。 jQuery的彈性與便利性讓操作DOM變得簡(jiǎn)單易懂，提升了Web開發(fā)效率。
以上是如何在jQuery中刪除最後一個(gè)子元素？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！