Невозможно удалить ребенка от родителя, используя window.matchMedia - PullRequest
0 голосов
/ 25 мая 2019

Я использую window.matchMedia("(max-width: 1300px)");, чтобы изменить 3 столбца в моем меню на 2 столбца. Я понимаю, что могу сделать это в своем CSS, но затем он выглядит примерно так https://imgur.com/a/z7uYMAJ. Так что я использую window.matchMedia ("(max-width: 1300px)"); взять этот нижний столбец и разделить на две отдельные колонки. Я смог осуществить это, создав новый столбец и дав ему несколько детей из другого столбца. Эффективно разделив этот столбец пополам. Моя проблема, хотя все наоборот, когда ширина экрана превышает 1300 пикселей. Я не могу удалить тот столбец, который я только что создал? Ошибка, которую я получаю, состоит в том, что узел, который я хочу удалить, не является потомком родителя, которого я использую .removeChild () на ... Но это так ?? Есть идеи?

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

ham.addEventListener('click', function() {
	ham.classList.add('ham-open');
	menu.style.marginLeft = '50px';
})

menuClose.addEventListener('click', function() {
	ham.classList.remove('ham-open');
	menu.style.marginLeft = '-700px';
})

leftArrow.addEventListener('click', function() {
	num--;
	if(num > 0) {
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
		console.log(num);
		console.log(img.style.backgroundImage);
	} else {
		num = 4;
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
	}
})

rightArrow.addEventListener('click', function() {
	num++;
	if(num <= 4) {
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
		console.log(num);
		console.log(img.style.backgroundImage);
	} else {
		num = 1;
		img.style.backgroundImage = 'url(img/fam-' + num + '.jpeg)';
	}	
})

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]);
		} 
	}
}

// window.sr = ScrollReveal();

// sr.reveal('.logo-wrap', {
// 	duration: 2000
// });

// sr.reveal('.w1', {
// 	duration: 2000,
// 	origin: 'bottom'
// });

// sr.reveal('.w2', {
// 	duration: 3000,
// 	origin: 'bottom'
// });

// sr.reveal('.w3', {
// 	duration: 4000,
// 	origin: 'bottom'
// });

// sr.reveal('.hours-line-left', {
// 	duration: 1000,
// 	origin: 'left',
// 	distance: '200px'
// });

// sr.reveal('.hours-line-right', {
// 	duration: 1000,
// 	origin: 'right',
// 	distance: '200px'
// });

// sr.reveal('.contact-line', {
// 	duration: 1000,
// 	origin: 'bottom',
// 	distance: '250px'
// });

// sr.reveal('.burrito', {
// 	duration: 1000,
// 	origin: 'right',
// 	distance: '250px'
// });

// sr.reveal('.taco', {
// 	duration: 1000,
// 	origin: 'right',
// 	distance: '250px'
// });

// sr.reveal('.guac', {
// 	duration: 1000,
// 	origin: 'right',
// 	distance: '250px'
// });

// sr.reveal('.nachos', {
// 	duration: 1000,
// 	origin: 'bottom',
// 	distance: '250px'
// });

// sr.reveal('.hot', {
// 	duration: 1000,
// 	origin: 'left',
// 	distance: '250px'
// });

// sr.reveal('.back-to-top', {
// 	duration: 1000,
// 	origin: 'bottom',
// });

// sr.reveal('.btp-arrow', {
// 	duration: 1500,
// 	origin: 'top',
// 	distance: '250px'
// });
...