Supprimer l'élément par id

Lorsque vous supprimez un élément avec JavaScript standard, vous devez d'abord vous rendre à son parent:

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

Devoir aller au nœud parent me semble un peu étrange, y a-t-il une raison pour que JavaScript fonctionne comme ça?

Je sais que l'augmentation des fonctions DOM natives n'est pas toujours la solution la meilleure ou la plus populaire, mais cela fonctionne 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 celui-ci

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

ou

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

Remarque: cette solution ne fonctionne pas pour IE 7 et les versions antérieures. Pour plus d'informations sur l'extension du DOM, lisez cet article .

EDIT : Revoir 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 IE). En savoir plus sur MDN .

Crossbrowser et IE> = 11:

document.getElementById("element-id").outerHTML = "";

Vous pouvez créer une removefonction pour que vous n'ayez pas à y penser à chaque fois:

function removeElement(id) {
    var elem = document.getElementById(id);
    return elem.parentNode.removeChild(elem);
}

C'est ce que le DOM prend en charge . Recherchez «supprimer» ou «supprimer» sur cette page et removeChild est le seul qui supprime un nœud.

Le DOM est organisé dans une arborescence de nœuds, où chaque nœud a une valeur, ainsi qu'une liste de références à ses nœuds enfants. element.parentNode.removeChild(element)Imite donc exactement ce qui se passe en interne: d'abord, accédez au nœud parent, puis supprimez la référence au nœud enfant.

A partir de DOM4, une fonction d'assistance est fournie à faire la même chose: element.remove(). Cela fonctionne dans 87% des navigateurs (à partir de 2016), mais pas dans IE 11. Si vous devez prendre en charge des navigateurs plus anciens, vous pouvez:

• Supprimez les éléments via le nœud parent, comme dans la question ,
• modifier les fonctions natives du DOM, comme dans la réponse de Johan Dettmar , ou
• utilisez un polyfill DOM4 .

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 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]);

vous pouvez simplement utiliser element.remove()

La ChildNode.remove()méthode supprime l'objet de l'arborescence à laquelle il appartient.

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

Voici un violon qui montre comment appeler document.getElementById('my-id').remove()

https://jsfiddle.net/52kp584L/

**

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

**

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

voici un exemple:

let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();

Selon DOM niveau 4 spécifications, qui est la version actuelle en matière de développement, il y a des nouvelles méthodes de mutation à portée de main disponibles: append(), prepend(), before(), after(), replace()et remove().

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

Devoir aller au nœud parent me semble un peu étrange, y a-t-il une raison pour que JavaScript fonctionne comme ça?

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

En revanche, vous n'avez pas toujours à l'appeler comme vous l'avez montré. element.parentNodeest 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

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

Pour 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 ce n'est pas mentionné dans ces réponses.

Si vous utilisez removeChild(), il renverra une référence au 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 vous renverra pas la 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 que ça vaut la peine de le remarquer :)

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

Les fonctions qui utilisent ele.parentNode.removeChild (ele) ne fonctionneront pas pour les éléments que vous avez créés mais pas encore insérés dans le code HTML. Les bibliothèques comme jQuery et Prototype utilisent judicieusement une méthode comme la suivante pour contourner cette limitation.

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

Je pense que JavaScript fonctionne comme ça parce que les concepteurs originaux du DOM ont tenu la navigation parent / enfant et la navigation précédente / suivante comme une priorité plus élevée que les modifications DHTML qui sont si populaires aujourd'hui. La possibilité de lire à partir d'un <input type = 'text'> et d'écrire sur un autre par emplacement relatif dans le DOM était utile au milieu des années 90, à une époque où la génération dynamique de formulaires HTML entiers ou d'éléments d'interface graphique interactifs était à peine un scintillement un œil de développeur.

Devoir aller au nœud parent me semble un peu étrange, y a-t-il une raison pour que JavaScript fonctionne comme ça?

IMHO: La raison de ceci est la même que celle que j'ai vue dans d'autres environnements: vous effectuez une action basée sur votre "lien" vers quelque chose. Vous ne pouvez pas le supprimer pendant que vous y êtes lié.

Comme couper une branche d'arbre. Asseyez-vous sur le côté le plus proche de l'arbre pendant la coupe ou le résultat sera ... malheureux (bien que drôle).

Celui-ci vient en fait de FireFox ... pour une fois, IE était en tête du peloton et permettait la suppression d'un élément directement.

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

Si vous appelez un objet pour valider hari-kari directement, puis immédiatement après sa mort, vous conservez toujours cette référence. Cela a le potentiel de créer plusieurs bogues désagréables ... comme ne pas le supprimer, le supprimer mais garder des références qui semblent valides, ou simplement une fuite de mémoire.

Je crois que lorsqu'ils ont réalisé le problème, le travail a consisté à supprimer un élément par le biais de son parent, car lorsque l'élément est parti, vous détenez simplement une référence au parent. Cela arrêterait tout ce désagrément, et (si la fermeture d'un arbre nœud par nœud, par exemple) se «fermait» assez bien.

Ce devrait être un bogue facilement réparable, mais comme pour beaucoup d'autres choses dans la programmation Web, la version a probablement été précipitée, ce qui a conduit à cela ... et au moment où la prochaine version est apparue, suffisamment de gens l'utilisaient pour changer cela conduirait à casser un tas de code.

Encore une fois, tout cela n'est que ma conjecture.

Cependant, j'ai hâte de voir le jour où la programmation Web sera enfin nettoyée au printemps, toutes ces étranges petites idiosynchracies seront nettoyées et tout le monde commencera à jouer selon les mêmes règles.

Probablement le lendemain du jour où mon robot serviteur me poursuit pour arriérés de salaire.

D'après ce que je comprends, la suppression d'un nœud directement ne fonctionne pas dans Firefox, seulement Internet Explorer. Donc, pour prendre en charge Firefox, vous devez vous adresser au parent pour supprimer son enfant.

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

// 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);
}

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;
}

Remarque à EObj=document.getElementById(EId).

Ce n'est pas UN signe égal ==.

si l'élément EIdexiste, la fonction le supprime, sinon il renvoie faux, non error.