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