Entfernen eines SVG-Elements aus dem DOM mit jQuery
Ich verwende jQuery, um ein Element wie folgt in ein eingebettetes SVG einzufügen:
%Vor%parentElement könnte beispielsweise $ ('g: first', svgRoot) sein, wobei svgRoot auf das eingebettete SVG-Element verweist.
%Vor%Dies funktioniert gut, das neue Rechteck wird im Browser angezeigt und zum DOM hinzugefügt:
Das Entfernen dieses Rechtecks schlägt jedoch fehl. Es wird immer noch im Browser angezeigt und im DOM angezeigt:
%Vor%Ich habe es auch versucht
%Vor%was zu der Fehlermeldung "Uncaught TypeError: Kann Methode 'removeChild' von null nicht aufrufen".
Hast du eine Idee, wie ich das beheben kann? Mit jQuery ist SVG oder ein anderes Plugin / Framework in meinem Projekt nicht möglich.
2 Antworten
Ich habe dieses Problem mit group s gelöst.
Ich habe diesen Code gefunden:
%Vor% Wo container mein Hauptelement SVG ist.
Dies ist versucht und wahr. Funktioniert einwandfrei.
BEARBEITEN
Wie in den Kommentaren hervorgehoben. Du findest diese Geige , die funktioniert. Ähnlich wie in Ihrem Beispiel. Es erstellt 4 Rechtecke und entfernt die 2 ersten.
Wenn Sie das erste Element entfernen wollen, müssen Sie folgendes angeben:
%Vor%Oder wenn Sie etwas mit ALLEN Ihrer Rechtecke machen wollen, könnten Sie dies mit etwas Ähnlichem angehen:
%Vor%Bearbeiten 2
Laut letztem Kommentar, solange Sie den Verweis auf das Objekt haben, können Sie dessen Variable verwenden, um es zu entfernen.
Diese aktualisierte Fiedel zeigt Ihnen, dass Sie mit lastRect das letzte hinzugefügte Rechteck entfernen können.
Ich habe festgestellt, dass das Ausführen von .find("*") sehr hilfreich ist. Ich schätze, dass es das DOM ausflacht und somit alle Verschachtelungskomplexitäten ignoriert, die jQuery nicht verarbeiten kann (vielleicht ... das ist zumindest meine Theorie) / p>
Also zum Beispiel entfernt dies alles andere als rect, g, svg Elemente.
$("svg").find("*").not("rect, g").remove();
Tags und Links javascript jquery svg html5