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

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

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

abdkode
PHP Super Member
PHP Super Member
Posts: 362
Joined: 07/01/2019 9:56 am

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

Postby abdkode » 26/03/2019 6:20 pm

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

Code: Select all

$(selector).remove()

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

Code: Select all

<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 904 times

เมื่อกดปุ่มดังกล่าวแล้ว
jquery remove2.jpg
jquery remove2.jpg (5.09 KiB) Viewed 904 times

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

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

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: Google Adsense [Bot] and 12 guests