حذف کردن یک عنصر موجود

برای حذف کردن یک عنصر HTML، ابتدا باید والد (parent) آنرا مشخص نمایید:

مثال (حذف کردن یک عنصر با JavaScript)

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
خودتان امتحان کنید »

 توضیح مثال:

کد HTML زیر، شامل یک عنصر <div> همراه با دو فرزند (child) است (دو عنصر <p>):

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

ابتدا عنصر با شناسه "div1" را به عنوان والد، شناسایی می کنیم: (متغیر یا شیء parent)

var parent=document.getElementById("div1");

سپس عنصر با شناسه "p1" را به عنوان فرزند، شناسایی می کنیم: (متغیر یا شیء child)

var child=document.getElementById("p1");

در آخر، از شی parent به عنوان والد، شی child به عنوان فرزند، حذف می شود:

parent.removeChild(child);

توجه: برای حذف کردن یک عنصر در مدل DOM، باید حتماً والد آنرا مشخص نمایید.

راه حل معمول برای مشخص کردن والد، استفاده از خصوصیت parentNode است:

var child=document.getElementById("p1");
child.parentNode.removeChild(child);