empty()

parameter : none

คำสั่งนี้ใช้สำหรับลบเนื้อหาที่อยู่ภายในอีลิเม้นท์ทิ้ง

ตัวอย่างการใช้งาน

Live Demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>jquery empty command</title>
<script type="text/javascript">
$(document).ready(function(){
 
	$('#empty').click(function(){
 
		$('div').empty();
 
	});
 
})
</script>
</head>
<body>
<input type="submit" name="empty" id="empty" value="Empty" />
<div style="width:200px;height:200px;background-color:#FF0000;color:#FFFFFF">
เนื้อหาของ Div กดปุ่ม Empty สิ เราจะล้างเนื้อหาของ Div นี้
</div>
</body>
</html>

ผมเซ็ตให้ Div มีพื้นหลังเป็นสีแดง เพื่อว่าเมื่อท่านกดปุ่ม Empty ท่านจะได้เห็นชัดๆ ว่าคำสั่งนี้มันลบเฉพาะเนื้อหา ไม่ได้ลบตัวอีลิเม้นท์ทิ้งแต่อย่างใด

ผมจะให้ดูตัวอย่างอีกตัว ซึ่งเปรียบเทียบการทำงานระหว่างคำสั่ง remove() กับ คำสั่ง empty()

Live Demo

เมื่อท่านดู Live Demo นี้แล้ว ท่านจะเห็นชัดเจนเลยว่า สองคำสั่งนี้ทำงานแตกต่างกันอย่างไร

remove() นั้นลบทิ้งทั้งอิลีเม้นท์เลย ส่วน empty() นั้นลบทิ้งเฉพาะเนื้อหาภายในอีลิเม้นท์ ส่วนตัวอีลิเม้นท์ยังอยู่

jQuery jQuery tutorial Live Demo remove
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ