Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. at generate

Question

I'm learning to generate and remove one image at a time using DOM and I'm unable to understand this error. It works fine till I add the if statement. I've look thru similar post on stack overflow but still can't grasp it. My code as follows:

HTML

<div id="imageContainer"> <!-- <img src="/image/bananas.jpg"> --> </div>

Javascript

let images = [ { image_name: 'bananas.jpg', number_of_items: 6, }, { image_name: 'birthday candles.jpg', number_of_items: 7, }, { image_name: 'blocks.jpg', number_of_items: 6, }, { image_name: 'brushes.jpg', number_of_items: 7, }] let generate = () => { let randomNum = Math.floor(Math.random() * images.length); let imageGenerated = images[randomNum].image_name; let imageContainer = document.getElementById("imageContainer"); if (imageContainer.hasChildNodes()) { imageContainer.removeChild(imageContainer.firstElementChild); } let img = document.createElement("img"); img.src = "image/" + imageGenerated; imageContainer.appendChild(img); }; let timer = () => { setInterval(generate, 3000); };

hasChildNodes returns true iff the parent has childNodes, not iff it has children. You’re attempting to remove the firstElementChild, which may not exist (whereas the firstChild does). — Sebastian Simon
– Sebastian Simon, Commented Jul 8, 2021 at 5:02

Stephane Vanraes · Accepted Answer · 2021-07-08 05:03:49Z

Your problem is that hasChildNodes checks for any type of node and the comment is a node.

To check for children use element.children, it returns an array-like object of all child elements.

if (imageContainer.children.length) { imageContainer.removeChild(imageContainer.children[0]; }

Collectives™ on Stack Overflow

Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. at generate

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related