Die Ausführung von „removeChild“ auf dem Knoten ist fehlgeschlagen

Andere Stack-Antworten wie diese und dieser scheinen Spezialfälle zu sein, und ich glaube, mein Fall ist allgemeiner. Ich mache das in meinem js:

var markerDiv = document.createElement("div");
markerDiv.innerHTML = "<div id='MyCoolDiv' style="color: #2b0808">123</div>";
document.getElementById("playerContainer").appendChild(markerDiv);

// after a brief delay, REMOVE the appended child
setTimeout(function(){ 
    var myCoolDiv = document.getElementById("MyCoolDiv");
    document.getElementById("playerContainer").removeChild(myCoolDiv);
}, 1500);

Alles funktioniert korrekt und wie erwartet (das Div ist korrekt angehängt und ich kann es sehen), bis removeChild() aufgerufen wird, woraufhin ich die Fehlermeldung erhalte Failed to execute 'removeChild' on 'Node'.

Was mache ich falsch?

Dein myCoolDiv Das Element ist kein untergeordnetes Element des Player-Containers. Es ist ein Kind des div Sie haben es als Wrapper dafür erstellt (markerDiv im ersten Teil des Codes). Darum scheitert es, removeChild Entfernt nur Kinder, keine Nachkommen.

Sie möchten dieses Wrapper-Div entfernen oder es überhaupt nicht hinzufügen.

Hier ist die Option „Überhaupt nicht hinzufügen“:

var markerDiv = document.createElement("div");
markerDiv.innerHTML = "<div id='MyCoolDiv' style="color: #2b0808">123</div>";
document.getElementById("playerContainer").appendChild(markerDiv.firstChild);
// -------------------------------------------------------------^^^^^^^^^^^

setTimeout(function(){ 
    var myCoolDiv = document.getElementById("MyCoolDiv");
    document.getElementById("playerContainer").removeChild(myCoolDiv);
}, 1500);

<div id="playerContainer"></div>

Oder ohne den Wrapper zu verwenden (obwohl er zum Parsen dieses HTML recht praktisch ist):

var myCoolDiv = document.createElement("div");
// Don't reall need this: myCoolDiv.id = "MyCoolDiv";
myCoolDiv.style.color = "#2b0808";
myCoolDiv.appendChild(
  document.createTextNode("123")
);
document.getElementById("playerContainer").appendChild(myCoolDiv);

setTimeout(function(){ 
    // No need for this, we already have it from the above:
    // var myCoolDiv = document.getElementById("MyCoolDiv");
    document.getElementById("playerContainer").removeChild(myCoolDiv);
}, 1500);

<div id="playerContainer"></div>

Für mich hat ein Hinweis geholfen, das problematische Element in ein anderes HTML-Tag einzubinden. Allerdings musste ich diesem HTML-Tag auch einen Schlüssel hinzufügen. Zum Beispiel:

// Didn't work
<div>
     <TroubledComponent/>
</div>

// Worked
<div key='uniqueKey'>
     <TroubledComponent/>
</div>

Das direkte übergeordnete Element Ihres untergeordneten Elements ist markerDiv. Daher sollten Sie „remove“ aus markerDiv wie folgt aufrufen:

markerDiv.removeChild(myCoolDiv);

Alternativ können Sie markerNode entfernen. Da dieser Knoten direkt an videoContainer angehängt wurde, kann er wie folgt entfernt werden:

document.getElementById("playerContainer").removeChild(markerDiv);

Der einfachste allgemeine Weg, einen Knoten zu entfernen, wenn Sie absolut sicher sind, dass Sie ihn tatsächlich in das DOM eingefügt haben, ist dieser:

markerDiv.parentNode.removeChild(markerDiv);

Dies funktioniert für jeden Knoten (ersetzen Sie einfach markerDiv durch einen anderen Knoten) und findet direkt den übergeordneten Knoten des Knotens, um daraus „remove“ aufzurufen. Wenn Sie nicht sicher sind, ob Sie es hinzugefügt haben, prüfen Sie noch einmal, ob parentNode ungleich Null ist, bevor Sie „removeChild“ aufrufen.

Ich habe es mit <> als übergeordnetes Element umschlossen, als ich es in normal , div geändert habe, es hat gut funktioniert

Wie andere bereits erwähnt haben, myCoolDiv ist ein Kind von markerDiv nicht playerContainer. Wenn Sie entfernen möchten myCoolDiv aber behalte markerDiv Aus irgendeinem Grund können Sie Folgendes tun

myCoolDiv.parentNode.removeChild(myCoolDiv);

JSFiddle

Ich hatte ein ähnliches Problem im vue.js Projekt. Dann bekam ich einen Hinweis zum Ändern fragment Wrapper für ein HTML-Element. Der häufigste Anwendungsfall für Fragmente ist wahrscheinlich die Rückgabe mehrerer Elemente. Mit Fragmenten ist dies einfach und Sie benötigen nicht Ihr typisches Wrapper-Div für die Elemente. Die kurze Syntax lautet <></>.

Grundsätzlich habe ich das Fragmentmuster verwendet Vue Dann habe ich den oben genannten Fehler beim dynamischen Rendern der Komponente erhalten transition. Es scheint, dass die dynamische Komponente (die mehrere Elemente umfasst) mit einem HTML-Element und nicht mit einem Fragment umschlossen werden musste.

// Vuejs
<transition
  name="router-anim"
  enter-active-class="animated animated-enter"
  mode="out-in"
  leave-active-class="animated animated-exit"
>
  <router-view /> // dynamic rendering based on current route using vue-router
</transition>

Wenn Sie in next.js 13 das App-Verzeichnis verwenden und vergessen, es einzugeben <html> Und <body> Tags zum Öffnen und Schließen in app/layout.tsx Möglicherweise wird dieser Fehler auch in der Datei angezeigt.