+ Start a Discussion
Johannes SchausbergerJohannes Schausberger 

Parentnode of Element is Null (Salesforce Bug?)

I have a lightning component where i use javascript to add/remove svg components based on user input.

After removing the svg components the second time, an exception is thrown: "NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."

The reason for this is that the parentNode/parentElement property of the tag is null, but the tag is in the children-list of the parentnode.

I am wondering if i made a mistake or if this is a framework-bug.
The following simple example reproduces the error. The first button inserts the svg tag. The second button deletes all child-group-tags and inserts a new one.

When deleting a tag a second time, the error is thrown.

Does anyone know how to fix this?


    <div><ui:button press="{!c.createSvg}" label="Create Svg Tag"></ui:button></div>
    <div><ui:button press="{!c.test}" label="Press 3x to create bug"></ui:button></div>
    <div id="funnel">Div for SVG</div>
Client Controller:
	test : function(component, event, helper) {
	    var parent = document.getElementById("parent");
	createSvg : function(component, event, helper){
	    //add svg tag
        var container = document.getElementById("funnel");
        var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
        var baseGroup = document.createElementNS("http://www.w3.org/2000/svg", 'g');
        baseGroup.id = "parent";
	removeChildGroups : function(parentTag) {
		var i;
		//iterate over children
		for(i = 0; i < parentTag.children.length; i++){
		    var child = parentTag.children[i];
		    //if g tag, remove
		    if(child.tagName == "g"){
		        if(child.parentElement == null && child.parentNode == null){
		            console.log("Here is the problem, child is in parent.children, but child.parent is null:");
	addChildGroups : function(parentTag) {
	    var groupTag = document.createElementNS("http://www.w3.org/2000/svg", 'g'); //Create a path in SVG's namespace
        var positionMarker = document.createElementNS("http://www.w3.org/2000/svg", 'circle'); //Create a path in SVG's namespace
        positionMarker.setAttribute("cx", Math.random()*50+50);
        positionMarker.setAttribute("cy", Math.random()*50+50);
        positionMarker.setAttribute("r", 10);


Junaid KhaderJunaid Khader

Hi Johannes,

In the code you have posted, the element with id parent  is not given. Kindly post the code containing that.

Johannes SchausbergerJohannes Schausberger

Hello Junaid, thank you for your response.

The element with id parent is dynamically created in ClientController.createSvg()

var baseGroup = document.createElementNS("http://www.w3.org/2000/svg", 'g');
 baseGroup.id = "parent";

it is a svg-group tag.

Instructions for reproducing the bug when using my example component:

  1. press "create svg tag" button.
  2. press the other button three times (every time pressed, a svg circle node will be deleted and then re-created)

regards, Johannes