Javascript DOM如何隐藏不合适的复选框

Question

我有一个在其中动态创建新标签的 Div。这些标签由一个具有唯一 ID 的跨度、用户输入的一些文本以及最重要的是标签内的一个复选框组成。该复选框供用户选择或取消选择创建的跨度。所有这一切都有效，但由于某种原因，复选框从我理解的范围中弹出（因为跨度是可检查的）并在跨度上方出现一条线，这会在我的标签之间产生间隙，如下所示：

当我尝试点击它时，没有任何反应。最奇怪的是 span 复选框有效。 当我检查代码时，我看到了这个，所以我知道复选框实际上不在范围内：

我用来执行此操作的代码：

让 wrapLabel = document.createElement("label") 让 inCheckBox = document.createElement("input")

    let x = document.createElement("span")
    let t = document.createTextNode(submission)

    let unique_id = uuidv4()

    inCheckBox.type = "checkbox"
    inCheckBox.name = unique_id 

    x.className = "item item-layer"
    x.id = unique_id 

    x.appendChild(t)
    wrapLabel.appendChild(inCheckBox) // replace this by x.appendChild(inCheckBox)
    wrapLabel.appendChild(x)
    wrapLabel.className = "wrapLabel"

    document.querySelector('.LayerList').appendChild(wrapLabel); 

问题是，当我尝试执行x.appendChild(inCheckBox) 之类的操作时，跨度不再可检查....理想情况下，我只是想使用我当前的代码并尽可能隐藏跨度上方复选框的间隙

Answer 1

我测试了同样的东西只是为了更好地理解。我建议您仅创建跨度标签并根据您的需要添加/删除选择的类。我的意思是，如果您单击一个跨度，它将像这样添加 selected 类：
<span class="item item-layer selected">layer 1</span> 如果您不想要该类，只需再次单击跨度。 您可以使用 javascript 完成工作：

document.querySelectorAll('.item-layer').forEach(item => {
    item.addEventListener('click', () => {
            if(item.classList.contains('selected'))
                item.classList.remove('selected');
            else
                item.classList.add('selected');
        });
    });

css 会是这样的：

.selected {
   border-color: green;
}

当它没有被选中时，你会放红色。
然后，您可以查询SelectorAll 选择了该类的每个跨度并执行您需要的任何操作。