如何删除从函数内创建的 HTML 类？

问题描述 投票：0回答：1

我正在 Odin 项目的 Etch A Sketch 项目上工作。我通过操作 DOM 创建了一个网格。我想通过删除创建的旧网格来调整网格大小，并通过提示用户输入新网格。我注意到我无法访问我创建的任何节点，因为它们位于 createGrid() 中。有没有什么方法可以删除与我的网格关联的创建的元素，同时保持循环完整？

我尝试在 resizeGrid() 中使用 VerticalBoxes.remove() 但我知道它不起作用，因为它不在全局范围内。我还尝试删除 resizeGrid() 中的容器并创建一个新容器，但由于存在重复的容器变量，最终出现声明问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Etch A Sketch</title>
    <link rel="stylesheet" href="styles.css">
    <script src= "scripts.js" defer></script>
    
</head>
<body>
    <h1>Etch A Sketch</h1>
    <div id= "container"></div>
    <div id= "grid-size">
        <button type="confirm" id= "resize-button">Resize Grid</button>
    </div>
        
</body>
</html>

#container {
    margin: auto;    
    max-width: 500px;
    max-height: 500px;
}

h1 {
    text-align:center;
}

.row {
    display:flex;
    height: auto;
}

.column {
    flex: 1;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid black;
}

.resize-button {
    display: inline-block;
    width:50px;
    height:50px;    
}

let container = document.querySelector("#container");
const button = document.querySelector("#resize-button")
function createGrid(num) {

    for (let i = 0; i < num; i++) {

    let horizontalBoxes = document.createElement("div"); 
    container.appendChild(horizontalBoxes);
    horizontalBoxes.classList.add("row");

        for (let y = 0; y < num; y++) {

            let verticalBoxes = document.createElement("div"); 
            horizontalBoxes.appendChild(verticalBoxes); 
            verticalBoxes.classList.add("column");
            verticalBoxes.addEventListener('mouseover', colorChange);
            
        }
    }   
}

function colorChange () {
    this.style.backgroundColor = "black"
    }  

createGrid(16);

function resizeGrid(newSize) {
    newSize = prompt("What size would you like the grid to be? (1-100)");
    createGrid(newSize);
}
button.addEventListener('click', resizeGrid);
javascript html css dom
1个回答
0
投票

有什么方法可以删除与我的网格关联的创建的元素，同时保持循环完好无损？

在插入新元素之前，只需清空 

container
的内容即可。

请参阅 在 JavaScript 中删除 DOM 节点的所有子元素，了解实现此目的的各种方法。

下面的例子使用

container.textContent = '';


let container = document.querySelector("#container");
const button = document.querySelector("#resize-button");

function resizeGrid() {
  let newSize = parseInt(prompt("What size would you like the grid to be? (1-100)"));
  if (0 < newSize && newSize < 101)
    createGrid(newSize);
}

button.addEventListener('click', resizeGrid);

function createGrid(num) {
  container.textContent = '';
  
  for (let i = 0; i < num; i++) {
    let horizontalBoxes = document.createElement("div");

    horizontalBoxes.classList.add("row");
    
    container.appendChild(horizontalBoxes);

    for (let y = 0; y < num; y++) {
      let verticalBoxes = document.createElement("div");

      verticalBoxes.classList.add("column");
      verticalBoxes.addEventListener('mouseover', colorChange);

      horizontalBoxes.appendChild(verticalBoxes);
    }
  }
}

function colorChange() {
  this.style.backgroundColor = "black"
}

createGrid(16);
#container {
    margin: auto;    
    max-width: 500px;
    max-height: 500px;
}

h1 {
    text-align:center;
}

.row {
    display:flex;
    height: auto;
}

.column {
    flex: 1;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid black;
}

.resize-button {
    display: inline-block;
    width:50px;
    height:50px;    
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Etch A Sketch</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>Etch A Sketch</h1>
  <div id="container"></div>
  <div id="grid-size">
    <button type="confirm" id="resize-button">Resize Grid</button>
  </div>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.