Can't find a way to clear grid in etch-a-sketch assignment


#1

/*
Hi all, have a problem when trying to clear/reset the grid. I’ve tried alot of things to no avail. Only the last column of “cells” is being removed with the “clearGridBtn”. I tried to post it on repl.it and codepen but grid does not display there-only on my local computer. Thank you all in advance…
*/

<head>
	<meta charset="utf-8">
	<title>etch-a-sketch</title>
.containerStyles { width: 640px; margin: 0 auto; background-color: red; } .rowStyle { display: block; float: left; } .cellStyle { display: block; background-color: blue; width: 100%; height: 100%;`Preformatted text` } button { display: block; text-align: center; margin: 5% auto; padding: 36px; border-radius: 4px; }
</head>

	
<body>
	<button>Make a painting!</button>
	<button id="clearGridBtn">Clear grid</button>
	<div id="container"></div>
	

	<script>
		var setGridBtn = document.querySelector("button");
		setGridBtn.addEventListener("click", getUserInput);

		var clearGridBtn = document.getElementById("clearGridBtn");
		clearGridBtn.addEventListener("click", clearGrid);

		var container = document.getElementById("container");
		container.classList.add("containerStyles");

		var parentEl = container;
		parentEl.addEventListener("mouseover", function (e) {
		e.target.style.backgroundColor = colors();
		});

		function getUserInput() {
		var userInput = prompt("Please choose a grid size to paint with…");

			function genDivs(numCells) {
				for (var i = 0; i < numCells; i++) {
					row = document.createElement("div");
					row.classList.add("rowStyle");
					row.style.width = 640 / numCells;
					row.style.height = 640 / numCells;

				for (var x = 1; x <= numCells; x++) {
					cell = document.createElement("div");
					cell.classList.add("cellStyle");
					row.appendChild(cell);
					}
					parentEl.appendChild(row);
				}
			}
			genDivs(userInput);
		}
		function colors() {
			let colorArray = [];
			for (let i = 0; i < 3; i++) {
				colorArray.push(Math.floor(Math.random() * (255 - 0) + 0));
			}
			// rgb -> hex
			let color = colorArray
				.map(x => x.toString(16))
				.join('');
			return `#${color}`;
		}
		function clearGrid() {
				parentEl.removeChild(row);
			}
			
</script>
</body>

</html>

#2

You could just do parentEl.innerHTML = ''; to remove all the inside html.


#3

Thank you! I think part of working with this stuff is becoming familiar with all the tools at our disposal. That never occurred to me-have a gr8 day!