Enlevez l'élément par son id

Lors de la suppression d'un élément avec JavaScript standard, vous devez vous présenter à ses parents d'abord:

var element = document.getElementById("element-id");
element.parentNode.removeChild(element);

Avoir à passer par le nœud parent du premier semble un peu étrange pour moi, est-ce une raison JavaScript fonctionne comme ceci?

  • Comme Jacques l'a dit, les DOM ne prend pas en charge la suppression d'un objet directement. Vous devez aller à son parent et de l'enlever de là. Javascript ne laissera pas un élément du suicide, mais il n'est permis de l'infanticide...
  • Jusqu'à présent, je sais, c'est la seule manière de croix-navigateur pour supprimer l'élément enfant si vous utilisez Javascript n'Bibliothèque Javascript.
  • Est-il une raison? Richard Feynman dit pas. (Bien que la justification technique est facile de voir si vous avez écrit des arbres de la structure des programmes. L'enfant doit informer le parent de toute façon, sinon la structure de l'arbre peut être rompu. Car il faut le faire en interne de toute façon, si il vous a fourni une ligne de la fonction, c'est juste une fonction pratique pour vous que vous pouvez définir vous-même.)
  • La seule raison que je vois est qu'il doit y avoir toujours un élément racine xml/document xhtml, donc vous ne serez pas en mesure de le supprimer car il n'a pas un parent
  • J'aime bien Johan de la solution, et je ne suis pas sûr de savoir pourquoi ces fonctions ne sont pas fournis en natif. Comme en témoigne le nombre de téléspectateurs, c'est une opération très courante.
  • Avez-vous dire que votre lien pour aller à "de Feynman: F***** aimants, comment fonctionnent-ils?" Parce que, euh, c'est là que ça, et je ne vois rien dans cette transcription sur les DOM et l'élément de suppression. (Ok, ok, j'ai obtenu ce que vous vouliez dire, mais le magnétisme est beaucoup moins une construction humaine de JavaScript, je crois, faire l'OP est question ici beaucoup plus viable que celle de l'enquêteur. ;^D cela dit, il est vrai, IANAP[hysicist].)
  • Eh bien, vous kinda faut le lire pour obtenir le point. Mais fondamentalement, c'est de répondre à la "semble un peu bizarre" partie. Aucune "raison", serait également "semble un peu bizarre". Parfois, le monde est juste la façon dont il est. Et de la "raison technique" est l'arbre-structure des trucs, mais je pense que ça n'aurait pas été une réponse intuitive ainsi alors mettez entre parenthèses dans un commentaire)
  • Mon humble avis: La raison pour laquelle c'est le même que celui que j'ai vu dans d'autres environnements: Vous effectuez une action basée sur votre "lien" à quelque chose. Vous ne pouvez pas le supprimer alors que vous êtes lié. Comme la coupe d'une branche d'arbre. S'asseoir sur le côté le plus proche de l'arbre lors de la coupe ou le résultat sera ... malheureux (mais drôle).
  • Vous pouvez utiliser element.remove() directement de l'ES5. Vous n'avez pas besoin du parent!
  • c'est prolicide, pas un infanticide, et en aparté, Javascript ne permet parricide par les grands-parents. 🔪
  • Cela fonctionne, une fois. J'ai un bouton qui crée l'élément que je veux, puis un evenListener qui écoute, cliquez sur un autre élément, et déclenche une fonction avec ce code (j'ai aussi essayé node.remove();). Avec les deux extraits, il fonctionne de la première fois, mais la deuxième fois, j'obtiens l'erreur suivante: Uncaught TypeError: Cannot read property 'remove' of null sur la première ligne de l'erreur, puis at removeElement (script.js:23) sur la deuxième ligne de l'erreur puis at HTMLDivElement.document.getElementById.addEventListener (script.js:36) sur la dernière ligne de l'erreur.
  • Ainsi, le navigateur soudainement renvoie "HTMLDivElement" (objet) au lieu de "elemID" la deuxième fois autour. Toute idée de ce qui se passe?

InformationsquelleAutor Zaz | 2010-08-01
  1. 627

    Je sais qu'en augmentant les natifs de DOM fonctions n'est pas toujours la meilleure ou la plus populaire de la solution, mais cela fonctionne très bien pour les navigateurs modernes.

    Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

    Et puis vous pouvez supprimer des éléments comme cette 

    document.getElementById("my-element").remove();

    ou

    document.getElementsByClassName("my-elements").remove();

    Remarque: cette solution ne fonctionne pas pour IE 7 et ci-dessous. Pour plus d'informations sur l'extension de la DOM lire ce l'article.

    MODIFIER: l'Examen de ma réponse en 2019, node.remove() est venu à la rescousse et peut être utilisé comme suit (sans le polyfill ci-dessus):

    document.getElementById("my-element").remove();

    ou

    [...document.getElementsByClassName("my-elements")].map(n => n && n.remove());

    Ces fonctions sont disponibles dans tous les navigateurs modernes (pas internet explorer). Lire plus sur MDN.

    • Ne devrait-elle pas être [ document.getElementsByClassName("mon-éléments")[0].remove(); ] je pense que la fonction remove() de l'ist a pas mis en œuvre par des tableaux. Afin de supprimer tous les éléments d'une classe ou tout le sélecteur de renvoyer un tableau, vous devez parcourir tous les éléments et remove() sur chacun d'eux.
    • avez-vous essayer le réel de l'extrait? Il n'y a pas des tableaux, mais plutôt NodeList ou HTMLCollection qui sont array ensemble d'éléments. La deuxième définition de la méthode permet de ces "ensembles d'éléments" à être supprimé.
    • L'exécution de ce dans la console chromée semble que pour supprimer un élément à la fois lors de l'utilisation de document.getElementsByClassName("my-elements").remove();. Edit: en fait il supprime un tas, mais nécessite de re-courir à la fin. Essayez sur cette page avec la classe "comment-copy".
    • vous avez raison, mon mauvais. J'ai modifié la fonction de la boucle vers l'arrière à travers les éléments. Semble bien fonctionner. Le comportement dont vous parlez est probablement causé par la mise à jour des index.
    • ahh, qui fait sens.
    • qu'en est while(this.length){ this[0].parentElement.removeChild(this[0]); } ?
    • qui doit probablement travailler aussi bien (ne l'ai pas testé moi-même). Cependant, cette boucle va lire la valeur de la longueur de chaque temps qui pourrait être légèrement plus lent. Aussi, à ma connaissance, vous auriez besoin de if(this[i] && this[i].parentElement) pour être sûr que l'élément courant existe toujours et a un élément parent, sinon vous risquez d'obtenir des erreurs de levée des éléments imbriqués, etc.
    • Ne pas le faire. Retirez simplement les éléments de la façon dont la langue a l'intention. Quiconque est familier avec l'analyse de XML reconnaîtront la nécessité d'obtenir à la mère de supprimer des enfants. Le HTML est un sur-ensemble de XML (en quelque sorte).
    • Particulièrement utile lors de l'utilisation d'un framework comme DHTMLX suite, en particulier lorsque vous avez plusieurs formulaires dans tabbars avec le même nom et de l'id et que vous essayez de mettre en oeuvre AJAX. Coller en haut de chaque forme d'annuler précédemment chargé des formulaires de sorte que la forme actuelle est le seul qui est chargé. Merci beaucoup!

    InformationsquelleAutor Johan Dettmar
  2. 274

    Crossbrowser et IE >= 11:

    document.getElementById("element-id").outerHTML = "";
    • Ce qui semble le plus simple, le plus fiable et le plus rapide de la solution. Je n'ai pas besoin de supprimer l'élément de sorte que je peux sauter la dernière ligne, mais qui ne devrait pas ajouter de frais généraux de toute façon.. Note: j'ai trouvé cela tout en essayant de trouver un rythme plus rapide que $.ready js alternative à noscript balises. Afin de l'utiliser comme je le souhaitais, j'ai eu l'envelopper dans un 1ms setTimeout fonction. Cela résout tous mes problèmes à la fois. Gracias.
    • Gardez à l'esprit outerHTML est encore une nouvelle(er) plus de la norme. Si vous êtes à la recherche de l'aide sur un logiciel >6 au moment de la rédaction, vous aurez besoin d'une autre solution. Le remove fonction mentionné par d'autres, est un cas similaire. Comme d'habitude, il est sûr de mettre en œuvre un polyfill.
    • delete element ne fait rien que vous ne pouvez pas supprimer les variables en JS, seules les touches 😉 Vérifiez par vous-même, il ne fonctionne pas par console.log(element) après delete element...
    • C'est un peu plus lent que removeChild (environ 6-7% sur mon système). Voir jsperf.com/clear-outerhtml-v-removechild/2
    InformationsquelleAutor user2192293
  3. 159

    Vous pourriez faire un remove fonction de sorte que vous ne voudriez pas avoir à y penser à chaque fois:

    function removeElement(id) {
    var elem = document.getElementById(id);
    return elem.parentNode.removeChild(elem);
}
    • Si vous souhaitez que le one-liner sans aller au mondial, vous pouvez modifier elem à remove.elem. De cette façon, les références de fonction elle-même, de sorte que vous n'avez pas à créer une autre variable globale. 🙂
    • alors, pourquoi avez-vous besoin de retourner la elem? Pourquoi ne pas function remove(id) { document.getElementById(id).parentNote.removeChild(document.getElementById(id)); }
    • Tandis que votre solution semble le plus évident, il effectue deux DOM recherches qui est plus lent et quelque chose que les autres solutions semblent vouloir éviter.
    • Ne fonctionne pas. Trop d'erreurs. Cela fonctionne : var elem = document.getElementById('id') ; elem.parentNode.removeChild(elem);
    • Wow, pourquoi faire si compliqué. Il suffit de passer l'élément lui-même à la fonction au lieu d'une chaîne d'identification. De cette façon, l'élément est accessible dans l'ensemble de la fonction, de plus il reste un liner
    • baleine, si vous voulez supprimer un élément avec cette approche, vous devez conserver une référence à une suppression de l'élément dom. Je ne suis pas tout à fait certain de ce que cela pourrait ressembler à une boucle for, qui a son propre champ d'application, mais je pense que votre approche peut conduire à des fuites de mémoire (comme vous l'avez peut-être le maintien de références pour les éléments supprimés, de sorte qu'ils ne serait pas le garbage collector). Je ne suis pas certain à 100% de ce. Tandis que votre approche est très bien aussi longtemps que vous comprenez que vous ne devez pas conserver des références à l'échelle mondiale ou grande portée ou de la croix-fonction, il peut être source de confusion.
    • bon point! Je ne pense pas que de cette. Mais cela peut être évité par la simple définition de la variable qui contient la (pas plus existant) élément de valeur null.

    InformationsquelleAutor xsznix
  4. 97

    C'est ce que le DOM prend en charge. De recherche de la page pour "supprimer" ou "supprimer" et removeChild est le seul qui supprime un nœud.

    • Que ça répond à ma question d'origine, mais pourquoi ne travail JavaScript comme ceci?
    • Je suis juste deviner ici, Mais je suppose qu'il a à faire avec la gestion de la mémoire. Le nœud parent le plus probable, contient une liste de pointeurs vers les nœuds enfants. Si vous venez de supprimer un nœud (sans l'aide de parent), le parent aurait encore maintenez le pointeur et provoquer une fuite de mémoire. Donc, l'api vous oblige à appeler une fonction sur le parent pour supprimer l'enfant. c'est aussi agréable, car il peut parcourir l'arborescence vers le bas à travers les nœuds enfants de l'appel de supprimer sur chacun d'eux, et pas de fuite de mémoire.
    • hé les gars, même si cette référence n'est pas cela, je l'ai trouvé par hasard. écrit element.remove(); fonctionne. C'est peut-être quelque chose de nouveau. Mais la première fois pour moi et ça fonctionne. Je pense qu'il doit avoir travaillé toujours que c'est très basique doit avoir des choses.
    • Mais il ne fonctionne pas dans IE7 et ci-dessous. À partir de IE7 et ci-dessous, remove() ne fonctionne pas
    • Si je devais deviner, la raison pour laquelle il fonctionne comme ceci, c'est que des éléments du DOM ne pouvez pas supprimer eux-mêmes. Vous êtes en train de retirer le fameux tapis de dessous les pieds. Vous devez le supprimer à partir du conteneur. Au moins c'est comment j'essaie de penser à elle.
    InformationsquelleAutor
  5. 80

    Le DOM est organisé en une arborescence de nœuds, où chaque nœud a une valeur, avec une liste de références à ses nœuds enfants. Donc element.parentNode.removeChild(element) imite exactement ce qui se passe à l'intérieur: d'Abord, vous allez le le nœud parent, puis de supprimer la référence à l'enfant du nœud.

    De DOM4, une fonction d'assistance est fourni pour faire la même chose: élément .remove(). Cette fonctionne dans 87% des navigateurs (dès 2016), mais pas IE 11. Si vous avez besoin de soutenir les anciens navigateurs, vous pouvez:

    • Merci de ne pas "modifier le natif des fonctions DOM".
    InformationsquelleAutor Zaz
  6. 35

    Pour supprimer un élément:

     var elem = document.getElementById("yourid");
 elem.parentElement.removeChild(elem);

    Pour supprimer tous les éléments avec, par exemple, un certain nom de la classe:

     var list = document.getElementsByClassName("yourclassname");
 for(var i = list.length - 1; 0 <= i; i--)
 if(list[i] && list[i].parentElement)
 list[i].parentElement.removeChild(list[i]);
    • C'est bien couverte par les réponses.
    • +1 Pour le simple exemple de la suppression par le nom de classe. Ce n'est pas bien couvert par les autres réponses
    • Pourquoi le if(list[i] && list[i].parentElement) ligne nécessaire? N'est-ce pas l'existence de chaque élément garanti par le fait qu'elle a été renvoyée par le getElementsByClassName méthode?
    • Malheureusement, l'existence n'est pas vraiment garanti pour autant que je sais, mais je ne connais pas les détails à ce sujet. Je vient de vivre une étrange indéfini ou la valeur null une fois, et je l'ai mis vérifier sans complément d'enquête. Donc c'est un peu de la bidouille.
    • Il devrait être document.getElementsByClassName(...
    • Vraiment, il faut être Elements au lieu de Element. Je vous remercie.

    InformationsquelleAutor csjpeter
  7. 20

    vous pouvez simplement utiliser element.remove()

    • element.remove() n'est pas du JavaScript valide et ne fonctionne que dans certains navigateurs tels que Chrome.
    • Josh, c'est du javascript valide, à l'exception seulement Firefox et Chrome mise en place (Voir MDN)
    • Mon mauvais, element.remove() est JavaScript valide avec DOM4, et fonctionne dans tous les navigateurs modernes, naturellement, à l'exception d'Internet Explorer.
    • Fonctionne très bien sur FireFox et Chrome. qui se soucie de l'IE
    • les gens avec des emplois de soins sur IE!
    • Selon le MDN, ChildNode.remove() de la page, Edge prend en charge aussi bien.
    • CERTAINES personnes avec des emplois de soins sur IE
    • MDN fournit également un polyfill pour IE soutien developer.mozilla.org/en-US/docs/Web/API/ChildNode/...

    InformationsquelleAutor Sai Sunder
  8. 17

    La ChildNode.remove() méthode supprime l'objet de l'arbre auquel il appartient.

    https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

    Ici est un violon qui montre comment vous pouvez appeler document.getElementById('my-id').remove()

    https://jsfiddle.net/52kp584L/

    **

    Il n'est pas nécessaire d'étendre NodeList. Il a été mis en place déjà.

    **

    • Remarque, ce n'est pas pris en charge dans n'importe quelle version de IE!
    • Si vous êtes encore en développement pour IE je suis très triste pour vous.
    • Vous n'avez pas de développer pour IE? Je me sens très désolé pour vos clients ou de clients.
    InformationsquelleAutor Alex Fallenstedt
  9. 7

    Avoir à passer par le nœud parent du premier semble un peu étrange pour moi, est-ce une raison JavaScript fonctionne comme ceci?

    Le nom de la fonction est removeChild(), et comment est-il possible de retirer l'enfant quand il n'y a pas de parent? 🙂

    D'autre part, vous n'avez pas toujours l'appeler comme vous l'avez montré. element.parentNode est seulement une aide pour obtenir le nœud parent du nœud donné. Si vous connaissez déjà le nœud parent, vous pouvez simplement l'utiliser comme ceci:

    Ex:

    //Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

    https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

    =========================================================

    Ajouter quelque chose de plus:

    Certaines réponses ont souligné qu'au lieu d'utiliser parentNode.removeChild(child);, vous pouvez utiliser elem.remove();. Mais comme je l'ai remarqué, il y a une différence entre les deux fonctions, et il n'est pas mentionné dans les réponses.

    Si vous utilisez removeChild(), il sera de retour une référence pour le nœud supprimé. 

    var removedChild = element.parentNode.removeChild(element); 
console.log(removedChild); //will print the removed child.

    Mais si vous utilisez elem.remove();, il ne reviendra pas vous le référence.

    var el = document.getElementById('Example');
var removedChild = el.remove(); //undefined

    https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

    Ce comportement peut être observé dans Chrome et FF. Je crois qu'Il est intéressant de remarquer 🙂

    Espère que ma réponse ajoute de la valeur à la question et sera utile!!

    InformationsquelleAutor Nimeshka Srimal
  10. 6

    Fonctions qui utilisent ele.parentNode.removeChild(ele) ne fonctionne pas pour les éléments que vous avez créés, mais pas encore inséré dans le HTML. Les bibliothèques comme jQuery et Prototype judicieusement utiliser une méthode comme suit pour échapper à cette limitation.

    _limbo = document.createElement('div');
function deleteElement(ele){
    _limbo.appendChild(ele);
    _limbo.removeChild(ele);
}

    Je pense que le JavaScript fonctionne comme ça, parce que le DOM d'origine de designers tenue parent/enfant et précédent/suivant de la navigation comme une priorité plus élevée que le DHTML modifications qui sont si populaires aujourd'hui. Être capable de lire à partir d'un <input type= "texte" > et d'écriture à l'autre par la position relative dans les DOM a été utile dans le milieu des années 90, une époque où la génération dynamique de l'ensemble des formulaires HTML ou interactive des éléments d'interface a été à peine une étincelle dans certains développeur de l'œil.

    InformationsquelleAutor Psudo
  11. 6

    Selon DOM de niveau 4 spécifications, qui est la version en cours de développement, il y a quelques nouvelle pratique de la mutation des méthodes disponibles: append(), prepend(), before(), after(), replace(), et remove().

    https://catalin.red/removing-an-element-with-plain-javascript-remove-method/

    InformationsquelleAutor Red
  12. 4

    Vous pouvez directement supprimer cet élément en utilisant remove() méthode de DOM.

    voici un exemple:

    let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();
    InformationsquelleAutor Code Cooker
  13. 3

    Avoir à passer par le nœud parent du premier semble un peu étrange pour moi, est-il
    une raison JavaScript fonctionne comme ceci?

    À mon humble avis: La raison pour laquelle c'est le même que celui que j'ai vu dans d'autres environnements: Vous effectuez une action basée sur votre "lien" à quelque chose. Vous ne pouvez pas le supprimer alors que vous êtes lié.

    Comme couper une branche d'arbre. S'asseoir sur le côté le plus proche de l'arbre lors de la coupe ou le résultat sera ... malheureux (mais drôle).

    InformationsquelleAutor TheSatinKnight
  14. 2

    Ce qu'en réalité on vient de FireFox... pour une fois, c'est à dire a été en tête du peloton et a permis la suppression d'un élément directement.

    C'est juste mon hypothèse, mais je crois que la raison pour laquelle vous devez retirer un enfant par le parent est en raison d'un problème avec la façon dont FireFox a géré la référence.

    Si vous appelez d'un objet pour commettre hari-kari directement, puis immédiatement après, il meurt, vous êtes tenant toujours que la référence à elle. Cela a le potentiel de créer plusieurs méchants bugs... comme ne pas le supprimer, en les supprimant, mais en gardant les références à ce qui semble valide, ou tout simplement une fuite de mémoire.

    Je crois que quand ils ont réalisé la question, le travail autour de a été de supprimer un élément par le biais de sa société mère, parce que lorsque l'élément est parti, vous êtes maintenant en tenant simplement une référence à la société mère. Ce qui n'empêchera pas tous que des désagréments, et (si la fermeture d'un arbre de nœud en nœud, par exemple) aurait 'zip-up" plutôt bien.

    Il devrait être facile à corriger un bug, mais comme beaucoup d'autres choses dans la programmation web, le communiqué de presse a probablement précipité, conduisant à ce... et par le temps, la prochaine version est venu autour, assez de gens ont été en utilisant ce que la modification de cette conduirait à la rupture d'un tas de code.

    Encore une fois, tout cela est tout simplement ma conjecture.

    Je ne, cependant, attendent avec impatience le jour lors de la programmation web obtient finalement un plein nettoyage de printemps, tous ces étranges petits idiosynchracies obtenir nettoyé, et tout le monde commence à jouer selon les mêmes règles.

    Probablement le lendemain de mon robot serviteur poursuit-moi pour les salaires.

    InformationsquelleAutor SilentThunderStorm
  15. 0

    De ce que je comprends, la suppression d'un nœud directement ne fonctionne pas dans Firefox, Internet Explorer uniquement. Ainsi, à l'appui de Firefox, vous devez vous rendre à la mère de le retirer de l'enfant.

    Ref: http://chiragrdarji.wordpress.com/2007/03/16/removedelete-element-from-page-using-javascript-working-in-firefoxieopera/

    • Qui n'a pas vraiment répondu à ma question, et la page que vous avez lié à l'offre de pire solution que la mienne.
    InformationsquelleAutor James
  16. 0
    //http://javascript.crockford.com/memory/leak.html
//cleans dom element to prevent memory leaks
function domPurge(d) {
    var a = d.attributes, i, l, n;
    if (a) {
        for (i = a.length - 1; i >= 0; i -= 1) {
            n = a[i].name;
            if (typeof d[n] === 'function') {
                d[n] = null;
            }
        }
    }
    a = d.childNodes;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            domPurge(d.childNodes[i]);
       }
    }
}

function domRemove(id) {
    var elem = document.getElementById(id);
    domPurge(elem);
    return elem.parentNode.removeChild(elem);
}
    InformationsquelleAutor will Farrell
  17. -3

    C'est la meilleure fonction pour supprimer un élément, sans erreur de script:

    function Remove(EId)
{
    return(EObj=document.getElementById(EId))?EObj.parentNode.removeChild(EObj):false;
}

    Note de EObj=document.getElementById(EId).

    C'est UN signe égal pas ==.

    si l'élément EId existe alors la fonction supprime, sinon elle retourne false, et pas error.

    • Crée une variable globale.
    • C'est aussi la pire version de une autre réponse, mais 2 ans de retard.
    InformationsquelleAutor Amin Atabakzadeh