Javascript 标记之间的CSS样式空间

我想在按下加号按钮时弹出输入标签（当前高度=0），再次按下时将其删除。 如何在不删除任何html标记的情况下删除“待办事项列表”div和“dfsdfs”li之间的间隙？ 如果我删除输入标记id=“searchBox”（当前高度=0），问题就会得到解决，但我需要输入标记。 只是找不到问题，为什么没有空间我就装不下

$（“ul”）。在（“单击”，“跨距”，函数（）{
$（this）.parent（）.fadeOut（500，函数（）{
$（this.remove（）；
});
})
$（“ul”）。在（“单击”，“li”，函数（）{
$（this.toggleClass（“lineThrough”）；
})
$（“#plusBtn”）。在（“单击”，函数（）{
})
$（“#搜索框”）。在（“按键”，函数（k）{
if（k.which==13）{
var newTodo=$（“#搜索框”）.val（）；
var newTodo=“
”+newTodo+”
“
if（$（“#搜索框”）.val（）！=“”）{
$（“#toDos”）。追加（newTodo）；
$（此）.val（“”）；
}
}
})

正文{
背景图像：线性渐变（向右，#076585，#fff）；
}
#桌子{
宽度：350px；
保证金：100像素自动；
盒影：5px 5px 20px#79777767；
}
#托多蒂{
背景：rgb（88,88,214）；
高度：45px；
线高：50px；
左侧填充：10px；
颜色：白烟；
字体大小：25px；
}
#plusBtn{
背景：透明；
边界：0；
颜色：白色；
字体大小：粗体；
字体大小：45px；
浮动：对；
线高：45px；
大纲：无；
}
#搜索框{
宽度：100%；
边界：0；
填充：0；
身高：0；
字体大小：20px；
左侧填充：10px；
颜色：灰色；
框大小：边框框；
}
#待办事项{
列表样式类型：无；
填充：0；
保证金：0；
}
李{
填充：0；
宽度：100%；
背景：rgb（240240240）；
框大小：边框框；
高度：45px；
线高：45px；
字体大小：25px；
颜色：灰色；
}
李：第n个孩子（2n）{
背景：白色；
}
.lineThrough{
文字装饰：线条贯通；
颜色：rgb（182179179179）；
}
跨度{
文本对齐：居中；
颜色：白色；
宽度：0；
高度：45px；
显示：内联块；
背景：rgb（248,46,46）；
右边距：12px；
边界：0；
不透明度：0；
}
李：悬停跨度{
宽度：45px；
过渡：.2s线性；
不透明度：1；
}

待办事项清单
待办事项清单
+

dsfsdfs

不要将输入的宽度或高度设置为0，而是使用

display:none

将其从布局流中完全删除。

您是否尝试过执行脚本来操纵显示：

if( element.style.display === 'block') {
    document.getElementById("searchBox").style.display = 'none';
} 
else {
    document.getElementById("searchBox").style.display = 'block';
}

---

实际上你解决了我的问题，但我还是想知道空间从哪里来。