HTML DOM Element removeChild() μέθοδος

Ορισμός και χρήση

removeChild() Η μέθοδος αφαιρεί τα υποκείμενα του στοιχείου.

Η μέθοδος επιστρέφει ένα Node αντικείμενο που αφαιρέθηκε; αν το στοιχείο δεν υπάρχει, επιστρέφει null.

Συμβουλή

Τα υποκείμενα αφαιρούνται από το Document Object Model (DOM).

Ωστόσο, μπορείτε να τροποποιήσετε τον επιστρεφόμενο κόμβο και να τον επαναφέρετε στο DOM (βλέπε τον παρακάτω παράδειγμα).

Δείτε επίσης:

remove() μέθοδος

appendChild() μέθοδος

insertBefore() μέθοδος

replaceChild() μέθοδος

childNodes ιδιότητα

firstChild ιδιότητα

lastChild ιδιότητα

firstElementChild ιδιότητα

lastElementChild ιδιότητα

Παράδειγμα

Παράδειγμα 1

Αφαιρέστε τον πρώτο στοιχείο από τη λίστα:

const list = document.getElementById("myList");
list.removeChild(list.firstElementChild);

Πριν από την αφαίρεση:

  • Coffee
  • Tea
  • Milk

Μετά την αφαίρεση:

  • Tea
  • Milk

Προσπαθήστε το προσωπικά

Παράδειγμα 2

Αφαιρέστε τον πρώτο υποκείμενο κόμβο από τη λίστα αν υπάρχει:

const list = document.getElementById("myList");
if (list.hasChildNodes()) {
  list.removeChild(list.children[0]);
}

Προσπαθήστε το προσωπικά

Παράδειγμα 3

Αφαιρέστε όλους τους υποκείμενους κόμβους από τη λίστα:

const list = document.getElementById("myList");
while (list.hasChildNodes()) {
  list.removeChild(list.firstChild);
}

Προσπαθήστε το προσωπικά

Παράδειγμα 4

Αφαιρέστε έναν στοιχείο από τον γονικό του κόμβο:

element.parentNode.removeChild(element);

Προσπαθήστε το προσωπικά

Παράδειγμα 5

Αφαιρέστε έναν στοιχείο από τον γονικό του στοιχείο και προσθέστε το ξανά:

const element = document.getElementById("myLI");
function removeLi() {
  element.parentNode.removeChild(element);
}
function appendLi() {
  const list = document.getElementById("myList");
  list.appendChild(element);
}

Προσπαθήστε το προσωπικά

Παράδειγμα 6: Προειδοποίηση

Χρησιμοποιήστε το appendChild() ή το insertBefore() για να εισάγετε το αφαιρεμένο στοιχείο στο ίδιο έγγραφο.

Μπορείτε να χρησιμοποιήσετε το document.adoptNode() ή το document.importNode() για να το εισάγετε σε ένα άλλο έγγραφο.

Το παρακάτω παράδειγμα αφαιρεί ένα στοιχείο από το γονικό του στοιχείο και το εισάγει σε ένα άλλο έγγραφο:

const child = document.getElementById("mySpan");
function remove() {
  child.parentNode.removeChild(child);
}
function insert() {
  const frame = document.getElementsByTagName("IFRAME")[0]
  const h = frame.contentWindow.document.getElementsByTagName("H1")[0];
  const x = document.adoptNode(child);
  h.appendChild(x);
}

Προσπαθήστε το προσωπικά

Γλώσσα

element.removeChild(παράμετρος)

ή

παράμετρος.removeChild(παράμετρος)

)

) Περιγραφή
παράμετρος Απαιτείται. Το στοιχείο που πρέπει να αφαιρεθεί (στοιχείο).

Αποτελεσματική τιμή

Τύπος Περιγραφή
Node

Το στοιχείο που αφαιρέθηκε (στοιχείο).

Αν το υποκείμενο στοιχείο δεν υπάρχει, είναι null.

Υποστήριξη του περιηγητή

element.removeChild() Είναι χαρακτηριστικό DOM Level 1 (1998).

Όλοι οι περιηγητές υποστηρίζουν πλήρως αυτό:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Υποστήριξη 9-11 Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη