Can't remove child from parent node

Question

Hey friends I'm using window.matchMedia("(max-width: 1300px)"); to add some divs to the DOM when the screen width is less than 1300px, Then I need to remove them when the screen width goes back over 1300px. I'm getting an error in my console saying the node I'm trying to remove isn't a child. But it is?? Any Ideas?

line 75 https://jsfiddle.net/hby2rn13/

 const ham = document.querySelector('.nav-box'); const menu = document.querySelector('.menu'); const menuClose = document.querySelector('#menu-close'); const leftArrow = document.querySelector('#left'); const rightArrow = document.querySelector('#right'); const img = document.querySelector('.image-slider'); const width = window.matchMedia("(max-width: 1300px)"); let num = 1; adjustMenuDesign(); window.addEventListener('resize', adjustMenuDesign); function adjustMenuDesign() { const tostadas = document.querySelector('.tostadas'); const tostadasRow = document.querySelector('.tostadas-row'); const tortas = document.querySelector('.tortas'); const tortasRow = document.querySelector('.tortas-row'); const columnRight = document.querySelector('.column-right .column'); const menu = document.querySelector('.menu-section'); const columnWrap = document.createElement('div'); const column = document.createElement('div'); const tacos = document.querySelector('.column-right .tacos'); const nodesToRemove = document.getElementsByClassName('remove'); if (width.matches) { // If media query matches columnRight.removeChild(tortas); columnRight.removeChild(tostadas); columnRight.removeChild(tostadasRow); columnRight.removeChild(tortasRow); column.appendChild(tostadas); column.appendChild(tostadasRow); column.appendChild(tortas); column.appendChild(tortasRow); column.classList.add('column'); columnWrap.classList.add('column-new'); columnWrap.appendChild(column); menu.appendChild(columnWrap); removeNodes(nodesToRemove); } else { putNodesBack(nodesToRemove); menu.removeChild(columnWrap); columnRight.appendChild(tortas); columnRight.appendChild(tostadas); columnRight.appendChild(tostadasRow); columnRight.appendChild(tortasRow); } function removeNodes(nodes) { for(let i = nodes.length-1; i >= 0; i--) { tacos.removeChild(nodes[i]); } } function putNodesBack(nodes) { for(let i = nodes.length-1; i >= 0; i--) { tacos.appendChild(nodes[i]); } } } 

Answer 1

I m not sure this is what you are trying to accomplish but as I went through your fiddle (as you highlighted line 75) I found that you are trying to remove a div element inside class 'menu-section' the problem here is you have more than one div element inside class 'menu-section' you need to specify which div you want to remove per say give that div some class name or id and select the specific one to remove or you can call an index value like menu.removeChild(columnWarp[0]) you can try this. hope this is what you are expecting.

For more please refer Remove all the child elements of a DOM node in JavaScript

Example

 <div class="parent"></div> <button onClick="create();">add</button> <button onClick="createFoo();">add Foo element</button> <button onClick="remove();">remove created div</button> <button onClick="removeTd();">remove selected div</button> <script> function create() { const columnWrap = document.createElement('div'); columnWrap.innerHTML = 'Empty div no id'; const menu = document.querySelector('.parent'); menu.appendChild(columnWrap); } function remove() { const columnWrap = document.createElement('div'); columnWrap.innerHTML = 'Empty div no id'; const menu = document.querySelector('.parent'); menu.appendChild(columnWrap); if(confirm("Are you sure??")){ menu.removeChild(columnWrap); } } function createFoo() { const columnWrap = document.createElement('div'); columnWrap.innerHTML = 'Empty div with id foo'; columnWrap.id ="foo"; const menu = document.querySelector('.parent'); menu.appendChild(columnWrap); } function removeTd() { const menu = document.querySelector('.parent'); const delElement = document.querySelector('#foo'); if(confirm("Are you sure??")){ menu.removeChild(delElement); } } </script> 

Happy Coding <3 ! Thanks