หน้าเว็บ

วันอังคารที่ 22 มีนาคม พ.ศ. 2554

ลบแล้วคืนค่าอิลิเมนต์ด้วย Method detach() ใน jQuery

คราวที่แล้วพูดถึง Method remove() ซึ่งใช้ลบอิลิเมนต์ภายในเซ็ตที่กำหนด วันนี้เรียวจะมาแนะนำ Method detach() ซึ่งใช้สำหรับลบอิลิเมนต์เหมือนกันแต่จะคืนค่าอิลิเมนต์ที่ถูกลบไปแล้วมาด้วย

ก่อนอื่นสร้างอิิลิเมนต์ขึ้นมาก่อนเหมือนเดิม

<div>
    <a href="#" class="link1">คลิ๊กเพื่อ Refesh หน้า</a>
    <a href="#" class="link2">คลิ๊กเพื่อกลับไปหน้าหลัก</a>
</div>
<div id="display">Wording ก่อนใช้ Method detach()</div>

ทีนี้เรียวต้องการลบอิลิเมนต์ทีั่ใช้คลาส "link1" แล้วนำอิลิเมนต์ที่ลบทั้งหมดไปแสดงในอิลิเมนต์ที่มี
id="display"  ก็เขียน jQuery แบบนี้

var element = $("div .link2").detach();
$('#display').html(element);

ทีนี้ลองรันดูจะได้ผลลัพธ์ดังนี้

<div>
    <a href="#" class="link1">คลิ๊กเพื่อ Refesh หน้า</a>
</div>
<div id="display"><a href="#" class="link2">คลิ๊กเพื่อกลับไปหน้าหลัก</a></div>

จะเห็นว่าอิลิเมนต์ที่ใช้คลาส "link2" ถูกลบไป แล้วนำอิลิเมนต์นั้นไปเก็บในตัวแปร element 
จากนั้นนำค่าอิลิเมนต์ทั้งหมดไปใส่ในอิลิเมนต์ที่มี id="display" อีกที

เอ๊ ด้วยความสงสัยเรียวเลยลองเขียนเหมือนเดิมเลยลองใช้ Method remove() เช่น

var element = $("div .link2").remove();
$('#display').html(element);

ทีนี้ลองรันดูกับได้ผลลัพธ์เหมือนกันกับข้างบน ก็เลยเกิดความสงสัยว่าจริง ๆ แล้วเจ้าสองตัวนี้มันต่างกันยังไงเพราะลองลักไก่ให้มัน return ค่าเก็บใส่ตัวแปรเจ้า Method remove() ก็ทำได้นี่หน่า

ใครรู้ช่วยอธิบายหน่อยนะคะ ว่าจริง ๆ แล้วเจ้าสองตัวนี้มันต่างกันยังไง =_="


ไม่มีความคิดเห็น:

แสดงความคิดเห็น