remove() เป็น เมธอดใน
JQueryที่ใช้ในการลบองค์ประกอบหรือ
elementทั้งหมดที่ถูกเลือกรวมทั้งข้อความหรือเนื้อหาทั้งหมด วิธีนี้ยังสามารถลบข้อมูลและ event ต่างๆขององค์ประกอบที่เลือก โดยมีรูปแบบการเขียนง่ายๆดังนี้
ตัวอย่างเช่น $("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 (10.36 KiB) Viewed 1910 times
เมื่อกดปุ่มดังกล่าวแล้ว
- jquery remove2.jpg (5.09 KiB) Viewed 1910 times
จากโค้ดด้านบน เราได้กำหนดใน script ไว้ว่า ถ้าเมื่อมีการคลิก ให้ $("p").remove(); ทำงาน ในที่นี้คือ ให้ลบ
teg <p> ออกไป ซึ่ง teg ก็คือข้อความ Welcome to Mindphp!!!. และมันก็หายไปหลังจากมีการคลิกปุ่ม เรากำหนดอะไรก็ได้ที่ต้องให้มันหายไป ไม่ว่ากำหนดเป็น คลาส $(".className").remove(); หรือจะเป็น id $("#idName").remove(); เป็นต้น หวังว่าสามารถนำเมธอดไปใช้ประโยชน์หรือนำไปประยุกต์เพิ่มเติมได้น่ะครับ
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : JQuery
-
สอนการใช้งาน HTML & CSS
-
ถามตอบ HTML CSS
-
บทเรียน CSS
-
บทเรียน HTML5
-
แลกเปลี่ยนความรู้ PHP