JQuery Tips : เมธอด remove() เพื่อลบ elementที่กำหนด

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
โพสต์: 361
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

JQuery Tips : เมธอด remove() เพื่อลบ elementที่กำหนด

โพสต์ที่ยังไม่ได้อ่าน โดย abdkode »

remove() เป็น เมธอดในJQueryที่ใช้ในการลบองค์ประกอบหรือelementทั้งหมดที่ถูกเลือกรวมทั้งข้อความหรือเนื้อหาทั้งหมด วิธีนี้ยังสามารถลบข้อมูลและ event ต่างๆขององค์ประกอบที่เลือก โดยมีรูปแบบการเขียนง่ายๆดังนี้

โค้ด: เลือกทั้งหมด

$(selector).remove()
ตัวอย่างเช่น $("p").remove() ผลลัพธ์ได้ teg <p> จะถูกลบออกไปรวมถึงเนื้อหาใน teg p ก็หายไปด้วย
เอาละเรามาโค้ดตัวอย่างกันน่ะครับ

โค้ด: เลือกทั้งหมด

<html> 
<head> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
		//this is JQuery CDN directed from the JQuery website 
	</script> 
	<script> 
		$(document).ready(function() { 
			$("button").click(function() { 
				$("p").remove(); 
			}); 
		}); 
	</script> 
</head> 

<body> 
	<div style="padding-left:220px;padding-top:100px;"> 
		<p style="font-size:35px;">Welcome to Mindphp!!!.</p> 
		<button style="padding:15px;">Click ME</button> 
	</div> 
</body> 

</html> 
ผลลัพธ์ที่ได้เมื่อเปิดเบราเซอร์เป็นดังนี้
jquery remove1.jpg
jquery remove1.jpg (10.36 KiB) Viewed 1907 times
เมื่อกดปุ่มดังกล่าวแล้ว
jquery remove2.jpg
jquery remove2.jpg (5.09 KiB) Viewed 1907 times
จากโค้ดด้านบน เราได้กำหนดใน script ไว้ว่า ถ้าเมื่อมีการคลิก ให้ $("p").remove(); ทำงาน ในที่นี้คือ ให้ลบ teg <p> ออกไป ซึ่ง teg ก็คือข้อความ Welcome to Mindphp!!!. และมันก็หายไปหลังจากมีการคลิกปุ่ม เรากำหนดอะไรก็ได้ที่ต้องให้มันหายไป ไม่ว่ากำหนดเป็น คลาส $(".className").remove(); หรือจะเป็น id $("#idName").remove(); เป็นต้น หวังว่าสามารถนำเมธอดไปใช้ประโยชน์หรือนำไปประยุกต์เพิ่มเติมได้น่ะครับ

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : JQuery
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 63