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

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

当我尝试单击它时，什么也没有发生。最奇怪的是span复选框起作用了。 当我检查代码时，我看到了这一点，因此我知道复选框实际上不在范围内：

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

让wrapLabel=document.createElement（“标签”） 让inCheckBox=document.createElement（“输入”）

---

问题是，当我尝试执行类似于

x.appendChild（inCheckBox）

的操作时，跨度不再是可检查的。。。。理想情况下，我只是希望使用我当前的代码，如果可能的话，在跨度上方的复选框中隐藏差距

我测试了同样的东西，只是为了更好地理解。我建议您只创建span标记，并根据需要添加/删除所选的类。我的意思是，如果您单击一个跨度，它将添加所选的类

，如下所示：

第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;
}

未选中时，将其置于红色。

---

然后，您可以查询选择所有已选择类的span，并执行任何您需要的操作。

是的，我理解，但它只将“检查”功能应用于span，因此我认为它现在不应该在它应该在的位置，尽管它将检查功能应用于span，但它可能正好在它应该在的位置。我的问题是，如果有可能删除复选框创建的额外空间，但仍然使用它来选中/取消选中span，这听起来是一个不错的选择！谢谢你的建议，如果我无法隐藏支票箱，我一定会尝试一下。不客气。我建议这样做是因为我尝试了很多，但都没有结果。但是我没有说什么，而是决定用这种方式来帮助别人。如果你发现了什么，告诉我，我很乐意再次阅读并帮助你

.selected {
   border-color: green;
}