Question

我正在使用window.matchMedia（“（max-width：1300px）”）;在屏幕宽度小于1300px时向DOM中添加一些div，那么当屏幕宽度回到1300px以上时，我需要将其删除。我在控制台中收到一条错误消息，说我要删除的节点不是孩子。但它是？？有任何想法吗？

第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

我不确定这是您要完成的工作，但是当我浏览小提琴时（如您突出显示的第75行），我发现您正在尝试删除类“ menu-section”中的div元素。如果您在类'menu-section'中有多个div元素，则需要指定要删除的div，例如，为该div提供一些类名或ID，然后选择要删除的特定div或调用一个索引值，例如menu.removeChild(columnWarp[0])，您可以尝试一下。希望这就是您的期望。

有关更多信息，请参阅Remove all the child elements of a DOM node in JavaScript

示例

<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>

快乐编码<3！谢谢

无法从父节点删除子节点

1 个答案: