查找上一个元素的动态子元素

这是我当前的html:

<div class="wrapper">
    <div class="label"></div>
    <div class="warning"></div> // Dynamic
</div>
<div class="input"></div>
.
.
. // repeated 3 more times

因此,在我的JS文件中,我遍历了输入,并为每个输入添加了一个侦听器,以在聚焦时从输入元素中删除类。但我也想检查上一个元素中是否存在“警告”元素,如果存在,请将其删除。

这是我能想到的最好的方法(它不起作用:D):

const inputs = document.querySelectorAll('.input');

inputs.forEach(input => {
    input.addEventListener('focus', () => {
        input.classList.remove('input--invalid')
        input.previousElementSibling.removeChild(document.querySelector('.warning'));
    });
});

可能错过了明显的事情(除了完全弥补之外)!

评论
  • 男人、繁华
    男人、繁华 回复

    我想你的问题可能是

    input.previousElementSibling.removeChild(document.querySelector('.warning'));
    

    尝试从previousElementSibling中删除在整个文档中找到的第一个.warning元素。

    尝试

    input.previousElementSibling.querySelector(".warning").remove();