在添加元素和 class 之前重置

Question

在插入带有 class 的元素后，我一直在尝试重置，但没有成功。 也试过 innerHTML="" 但它不起作用。 可能是因为我使用的是 insertAdjacentHTML()。 -？ 在插入之前我找不到删除方法。

let small = document.querySelector("small")
let img_1 = document.querySelector('[name="img_1"]')

//Image fields validation

if (img_1.value =="") {
    
    img_1.classList.add('is-invalid_create')
    small = '<small class="text-danger__Create">Campo imagen 1 no puede estar vacío</small>'
    img_1.insertAdjacentHTML("afterend", small);
} else {
    img_1.classList.add('is-valid_create')
    img_1.classList.remove('is-invalid_create')
}

如果字段是，我正在尝试使用错误消息构建验证。 我使用了 insertAdjacentHTML，因为 innerHTML 没有显示文本。

小提琴： https://jsfiddle.net/gzsudqvm/

我试图做一个更简单的方法，比如：

    function setErrorFor(input, message) {
    input.innerHTML = ""
    input.classList.add('is-invalid_create')
    input.innerHTML = "<small class='danger'>"+message+"</small>" 
}

但是消息没有呈现，也没有错误。

Answer 1

如果不查看更多代码，很难判断 - 不了解您尝试重置的方式/内容。

也试过 innerHTML=""

对于哪个元素？ 如果它是类似img_1.innerHTML=""的东西，那么你的small东西就会被抛在后面，因为你在img_1之外添加了它。 （如果这是有意/必要的，那么您可以尝试类似el.parentElement.removeChild(el)的方法来分别删除剩余的元素。）

使用 insertAdjacentHTML 因为 innerHTML 没有显示文本

调试器是否显示任何错误？ 当您检查外部元素时，它是否根本没有添加到 html 中，或者文本只是没有呈现？