javascript 我通过JS动态地将div添加到DOM中,并使用appendChild和后来的removeChild,但是当第二次追加时,它将无法工作

cu6pst1q  于 2023-05-27  发布在  Java
关注(0)|答案(3)|浏览(161)

在下面的代码中,create()第一次运行正常,但第二次在boxWrapper.appendChild(box);上出现了问题。看起来removeChild会弄乱父box-wrapper属性。

function pixels() {
    const value = document.querySelector("#value")
    const input = document.querySelector("#pixels")

    value.textContent = input.value

    input.addEventListener("input", (event) => {
        value.textContent = event.target.value
    })

    return input.value;
}

function create() {

    var elements = document.getElementsByClassName('box'); // get all elements

    let z = elements.length;

    let a = pixels();
    let b = a * a;
    let c = (1 / a) * 100;

    if (z == 0) {

        for (i = 1; i < (b + 1); i++) {
            var boxWrapper = document.getElementById("box-wrapper");

            var box = document.createElement("div");

            box.innerHTML = '1';
            box.style.backgroundColor = "light green";

            var input_percen = c + "%";

            box.style.width = input_percen;
            box.style.height = input_percen;

            box.classList.add("box");

            box.addEventListener('mouseover', function onMouseover(event) {
                event.target.style.backgroundColor = 'black';
            });

            boxWrapper.appendChild(box);   
        }
    } else {
        reset();
    }

}

function reset() {
    while (div = document.getElementById("box-wrapper")) {
        div.parentNode.removeChild(div);

    }
    create();
}

我期待着清除 Package 盒,并能够附加儿童多次。

aemubtdh

aemubtdh1#

你会得到这个错误,因为你正在删除你试图清空自己的div:

function reset() {
    while (div = document.getElementById("box-wrapper")) {
        div.parentNode.removeChild(div);

    }
    create();
}

#box-wrapper中选择parentNode,然后从查尔兹中删除#box-wrapper div。
不要删除div本身,而是尝试将innerHTML设置为空:

function reset() {
    div = document.getElementById("box-wrapper");
    div.innerHTML = '';
    
    create();
}
332nm8kg

332nm8kg2#

您可以通过执行以下操作从DOM中删除div#box-wrapper

div.parentNode.removeChild(div);

要从这个div中删除所有子元素,可以使用replaceChildren()

document.getElementById("box-wrapper").replaceChildren();
t3psigkw

t3psigkw3#

非常感谢。我已经跟:
public void run(){

var elements = document.getElementsByClassName('box'); // get all elements
console.log(elements.length);
let q = elements.length;
 for(let i = 0; i < q; i++){
 elements[0].remove();
 }`

谢谢!

相关问题