在 javascript 中附加元素之前重置或清除

Question

这是我的第一个应用程序，我已经在教程地狱中度过了一年，并决定开始我自己的小应用程序。所以在这部分我使用了 addEventListener()，它附加和创建文本。文本是由其他函数的结果之和创建的变量（我不知道这是否相关），但问题是一旦我提交了一个按钮并创建了 HTML 元素，如果我继续提交元素会堆积起来。所以我尝试了 removeChild() 但它没有用，因为变量已经用它的值创建，或者......带来了一个无法删除未定义的 removeChild() 的错误（因为我试图在附加之前清除值），还尝试通过添加 .innerHTML=""; 来重置变量但我不知道在哪里找到它。我还检查了 replaceChild() 但它没有意义，因为每次单击都应该创建一个新的第一个事件。我尝试了 empty().append() 但似乎它适用于 jquery.

看来我需要学习很多关于作用域的知识。

    let frase;
function armarPersonaje() { 
    if(!reversarNombre() || !descMes || !descDia){
        return false
    } else {
        frase = nombreReves + descMes + descDia;
        return true
    }
    
}


let div;
let h3Element;    
function mostrarPersonaje(){  

    let div = document.getElementById('container')
    let h3Element = document.createElement("h3")
    h3Element.className = "addedH3"

    if(frase.length > 0){

        h3Element.appendChild(document.createTextNode(frase));
        div.appendChild(h3Element)

    } 
    
}

enter image description here

完整代码如下 https://jsfiddle.net/santiso/mzv3ct5e/

Answer 1

这里的问题是，在你的最后一个函数 mostrarPersonaje() 中，你总是在 if 之前创建元素 h3Element ，即使你清空了 div 的父节点将在下一次点击时创建一个新元素 class addedH3 !

如何解决？首先在输入条件之前不要创建，然后在条件之前再次单击时删除它

here is the fiddle

这是我添加的内容

    let oldH3Element =  document.querySelector('h3.addedH3')
    if(oldH3Element) oldH3Element.parentNode.removeChild(oldH3Element)

在 javascript 中附加元素之前重置或清除

Reset or Clear before appending an element in javascript

javascript

dom-events