There are four divs with an event listener onclick, triggering a JavaScript function that simply removes the clicked div:
this.parentNode.removeChild(this);
Although it should remove the specific div clicked on, it instead deletes the last child and alters the id assigned to it. The id then decreases by one with each successive click on other divs, removing the childNodes in reverse order.
I have tried various alternatives, such as:
document.getElementById('parentElementName').removeChild(this.getAttribute('id'));
or
const parent = document.getElementById('parentElementName');
const to_be_removed = document.getElementById(this.getAttribute('id'));
parent.removeChild(to_be_removed);
and using childNodes // id = 1,2,3,4:
const to_be_removed = document.getElementById('box_content').childNodes[parseInt(this.getAttribute('id'))];
const parent = document.getElementById('box_content');
parent.removeChild(to_be_removed);
Interestingly, I can successfully modify visibility or backgroundColor:
document.getElementById('box_content').childNodes[parseInt(this.getAttribute('id'))].style.visibility = 'hidden';