I am having trouble figuring out why only one of the following removeChild methods seems to work when the block is run. I just can’t get the table1header element to be removed at the same time as the tbodyid element. in Chrome, if i copy and paste into the console the two lines where i declare elem and remove elem it the table1header gets removed like i want it to be. i tried swapping the order in the code but tbodyid gets removed and table1header does not.
if (elementExists) {
console.log("table1header exists");
let elem1 = document.getElementById("tbodyid");
elem1.parentNode.removeChild(elem1);
console.log("table body removed");
let elem = document.getElementById("table1header");
elem.parentNode.removeChild(elem);
console.log("table header removed");
}
Sorry. I should have include that. To recreate the situation what I am trying to do is dynamically modify or delete a table.
To create the table, click on the button labeled “Add Day 1 Non-Doc Markets” and check any number of checkboxes and click the button “Save Markets”.
Reopening the same modal and changing the checkboxes modifies the content in the table.
If I uncheck all boxes and “Save Markets”, I want the table to disapear. If i open the modal later, check boxes and “Save Markets” then I want a new table to be created using data based on the checked boxes.
Hello,
I couldn’t find any error in your removeChild calls, so I run the CodePen with the debugger and indeed both removeChild statements are working fine. When line 887 ( the Hola log statmente) is reached both elements are gone.
I think the error is later in the code and the header gets recreated event if nothing has been selected in the popup.
If you need more help just tell and I will take a deeper look.
It does remove it. But generateTableHead adds it back and then you get a reference error when you try to access the properties on tbody because it is null.