متد element.removeChild

مثال (متد element.removeChild)

حذف کردن اولین عنصر <li> از یک لیست:

var list = document.getElementById("myList"); // Get the <ul> element with id="myList"
list.removeChild(list.childNodes[0]); // Remove <ul>'s first child node (index 0)

قبل از حذف شدن:

Coffee
Tea
Milk

بعد از حذف شدن:

Tea
Milk

خودتان امتحان کنید »

در انتهای این صفحه، مثال های بیشتری آورده شده است.

تعریف و کاربرد

متد()removeChild یک گره فرزند از یک عنصر مشخص را حذف می کند.

این متد، گره حذف شده را بعنوان یک شیء گره برمی گرداند، و یا در صورتی که گره مورد نظر وجود نداشته باشد، null را برمی گرداند.

نکته: گره فرزند حذف شده، دیگر جزئی از DOM نیست اما با استفاده از ارجاعی که توسط این متد برگردانده می شود، این امکان وجود دارد که عنصر حذف شده را در آینده به یک عنصر الحاق کنیم.

نکته: می توانید از متدهای appendChild() و insertBefore() برای الحاق گره حذف شده به یک سند مشابه استفاده کنید. برای الحاق کردن به یک سند دیگر می توانید از متدهایdocument.adoptNode() یا document.importNode() استفاده کنید.

پشتیبانی مرورگرها

متد
removeChild()	بله	بله	بله	بله	بله

نحوه استفاده

node.removeChild(node)

مقادیر پارامترها

پارامتر	Type	توضیحات
node	Node object	ضروری. شیء گره ای که شما می خواهید آن را حذف کنید.

جزئیات تکنیکی

مقدار برگشتی	یک شیء گره که مشخص کننده ی گره حذف شده می باشد، و یا اینکه null در صورتی که گره مورد نظر وجود نداشته باشد.
DOM Version	Core Level 1 Node Object

مثال - خودتان امتحان کنید

مثال (متد element.removeChild)

فهمیدن اینکه آیا یک لیست(list) دارای فرزندی هست یا نه. در صورت داشتن فرزند، اولین گره فرزند را حذف می کند(اندیس 0):

// Get the <ul> element with id="myList"
var list = document.getElementById("myList");

// If the <ul> element has any child nodes, remove its first child node
if (list.hasChildNodes()) {
list.removeChild(list.childNodes[0]);
}

قبل از حذف کردن:

Coffee
Tea
Milk

بعد از حذف کردن:

Tea
Milk

خودتان امتحان کنید »

مثال (متد element.removeChild)

حذف کردن تمام گره های عنصر از یک لیست:

// Get the <ul> element with id="myList"
var list = document.getElementById("myList");

// As long as <ul> has a child node, remove it
while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}

قبل از حذف کردن:

Coffee
Tea
Milk

بعد از حذف کردن:

خودتان امتحان کنید »

مثال (متد element.removeChild)

حذف کردن یک عنصر <li> با آی دی myLI ، از عنصر والدش(بدون مشخص کردن گره والد):

var item = document.getElementById("myLI");
item.parentNode.removeChild(item);

قبل از حذف کردن:

Coffee
Tea
Milk

بعد از حذف کردن:

Coffee
Milk

خودتان امتحان کنید »

مثال (متد element.removeChild)

حذف کردن یک عنصر <li> از عنصر والدش و الحاق کردن دوباره ی آن:

var item = document.getElementById("myLI");

function removeLi() {
    item.parentNode.removeChild(item);
}

function appendLi() {
    var list = document.getElementById("myList");
    list.appendChild(item);
}

خودتان امتحان کنید »

مثال (متد element.removeChild)

حذف کردن یک عنصر <span> از عنصر والدش و الحاق کردن آن به یک عنصر <h1> در یک سند دیگر:

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

function removeLi() {
    child.parentNode.removeChild(child);
}

function myFunction() {
    var frame = document.getElementsByTagName("IFRAME")[0]
    var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
    var x = document.adoptNode(child);
    h.appendChild(x);
}

خودتان امتحان کنید »

کلیه توابع و خصوصیت های شیء Element در JavaScript

: نوشته شده توسط احسان عباسی; بازدید: 5741

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.