บทความก่อนหน้านี้ได้แนะนำ Method empty() ไป วันนี้เรียวจะมาแนะนำ Method remove() ตัวนี้จะต่างกับ empty() ตรงที่มันจะลบอิลิเมนต์ทิ้งไปเลยไม่ได้เคลียร์ค่าคอนเทนต์ที่อยู่ในอิลิเมนต์เหมือนเจ้า empty()
ก่อนอื่นสร้างอิลิเมนต์ขึ้นมาก่อนเหมือนเดิม
<div>
<a href="#" class="link1">คลิ๊กเพื่อ Refesh หน้า</a>
<a href="#" class="link2">คลิ๊กเพื่อกลับไปหน้าหลัก</a>
</div>
จากนั้นเรียวจะลองลบอิลิเมนต์ที่ใช้คลาส "link2" ออกนะค่ะ
$(document).ready(function(){
$("div .link2").remove();
});
ทีนี้ลองรันดู
<div>
<a href="#" class="link1">คลิ๊กเพื่อ Refesh หน้า</a>
</div>
จะเห็นว่าอิลิเมนต์ถูกลบเรียบร้อยแล้ว
ถ้าต้องการลบลิงค์ทั้งหมดก็เขียนได้แบบนี้
$("div a").remove();
ลองรันดู
<div></div>
จะเห็นว่าลิงค์ทั้งหมดภายในแท็ก div ถูกลบไปแล้ว
ทีนี้ถ้าเผื่อเราจะลบลิงค์ที่มี content คำว่า Refesh ออกจะได้ไหม ทำไมจะไม่ได้ในเมื่อเป็น jQuery
$("div a").remove(":contains('Refesh')");
ลองรันดูอีกที
<div>
<a href="#" class="link2">คลิ๊กเพื่อกลับไปหน้าหลัก</a>
</div>
จะเห็นว่าแท็ก a ที่มีคำว่า "Refesh" ถูกลบไปเรียบร้อยแล้ว
ทีนี้ถ้าเรียวเขียนแบบนี้
$("div").remove(":contains('Refesh')");
จะเกิดอะไรขึ้นลองไปรันดูนะคะ
ลบอิลิเมนต์ได้ง่ายมาก ๆ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น