การใช้งานคำสั่ง remove และ empty ใน jQuery เพื่อลบ Element หรือ ลบข้อมูลใน Element ออก

 

 

      คำสั่ง remove(); สำหรับลบ Element ที่ต้องการ และ empty(); สำหรับลบข้อมูลใน Element ที่ต้องการ

เช่นเมื่อคลิ๊กปุ่ม แล้วต้องการให้ Element ส่วนนั้นๆหายไป ก็ใช้คำสั่งนี้ $("#target").remove(); เมื่อคลิ๊กปุ่มเป้าหายแล้ว id="target" จะหายไป


 

.remove(); = ลบ Element ที่ต้องการ

ตัวอย่างคำสั่ง

$("#target").remove();

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

<div id="target"> ส่วนนี้จะถูกลบไป เมื่อคลิ๊ก </div>
<button tpye="button" id="btn">คลิ๊กเพื่อลบ</button>
<script>
 $(document).ready(function(){     // สั่งให้ script ทำงานเมื่อโหลด DOM เสร็จ
$("#btn").click(function(){         // ดักจับ Event click ( เริ่มทำงานเมื่อมีการคลิ๊กที่เป้าหมาย คือ id="btn" )
$("#target").remove();        // สั่งลบ id="target"
});});
</script>

 

        จากตัวอย่าง จะมีอยู่ 2 Element คือ 1."ส่วนนี้จะถูกลบไป เมื่อคลิ๊ก" และ 2.(ปุ่ม)คลิ๊กเพื่อลบ

เมื่อเราทำการคลิ๊กที่ปุ่ม "คลิ๊กเพื่อลบ" Element "ส่วนนี้จะหายไป เมื่อคลิ๊ก" จะถูกลบออกไปทันที


 

.empty(); = ลบค่าทั้งหมดใน Element ที่ต้องการ (แต่ยังคง Element นั้นใว้)

ตัวอย่างคำสั่ง

$("#target").empty();

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

<div id="target2">เมื่อคลิ๊กปุ่ม ค่าใน Element นี้จะถูกลบออก</div>
<button type="button" id="btn2">คลิ๊กเพื่อลบ</button>
<script>
$(document).ready(function(){     // สั่งให้ script ทำงานเมื่อโหลด DOM เสร็จ
$("#btn2").click(function(){        // ดักจับ Event click ( เริ่มทำงานเมื่อมีการคลิ๊กที่เป้าหมาย คือ id="btn" )
$("#target2").empty();        // สั่งลบค่าภายใน id="target" ออก
});
});
</script>

       

        จากตัวอย่าง จะมีอยู่ 2 Element คือ 1."เมื่อคลิ๊กปุ่ม ค่าใน Element นี้จะถูกลบออก" และ 2.(ปุ่ม)คลิ๊กเพื่อลบ

เมื่อเราทำการคลิ๊กที่ปุ่ม "คลิ๊กเพื่อลบ" ค่าที่มีใน id="target2" จะถูกลบออกไป แต่ id="target2" จะยังอยู่ครับ