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

yjghlzjz 于 2023-08-02 发布在 Java

关注(0)|答案(2)|浏览(88)

我在Odin Project的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

来源：https://stackoverflow.com/questions/76800000/how-do-i-remove-html-classes-created-from-within-a-function

2条答案

按热度按时间

rdrgkggo1#

有没有什么方法可以删除与我的网格相关联的创建元素，同时保持我的循环完整？
在插入新元素之前，只需清空container的内容。
参见Remove all child elements of a DOM node in JavaScript了解实现此目的的各种方法。
下面的示例使用

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>

赞(0）回复(0）举报 2023-08-02

fhg3lkii2#

难道replaceChildren()不适合您使用吗？
只需存储您创建的新节点，然后使用replaceChildren添加它们，同时删除父节点和旧子节点之间的链接。
使用这个解决方案，我相信你的createGrid()函数看起来像这样：

function createGrid(num) {
    const newHorizontalBoxesList =[]
    
    for (let i = 0; i < num; i++) {
    let horizontalBox = document.createElement("div"); 
    newHorizontalBoxesList.push(horizontalBox)
    horizontalBox.classList.add("row");

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

            let verticalBox = document.createElement("div"); 
            horizontalBox.appendChild(verticalBox); 
            verticalBox.classList.add("column");
            verticalBox.addEventListener('mouseover', colorChange);
            
        }
    }
    container.replaceChildren(...newHorizontalBoxesList);
}

字符串
请注意，replaceChildren()需要连续的参数，而不是一个新子元素的奇异数组，因此需要扩展。

赞(0）回复(0）举报 2023-08-02

我来回答

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

2条答案

相关问题

热门标签

最新问答