Javascript 如果已删除所有内部元素，如何删除div？

我有一个包含几个li元素的div。每个li都有一个闭合图标。单击它后，与它相关的整个li项目将被删除

然而，一旦所有li元素都被移除，div仍然保留。在我的项目中，它有一个背景色，所以当移除li元素时，空的div区域是可见的

我已经尝试了这个链接上的所有选项，但没有一个有效

HTML代码：

<div class="divArea">
    <li class="li-item" id="li-item1">Item 1 <span class="icon icon-close 
item-close" id="item-close1"></span></li>
    <li class="li-item" id="li-item2">Item 2 <span class="icon icon-close 
item-close" id="item-close2"></span></li>
</div>

---

如何使最后一个li元素被删除后，div区域也将被删除？

有一个检查函数，该函数从每个处理程序调用：

function removeAndRemoveParentIfEmpty(element) {
    var parent = element.parent();
    element.remove();
    if (!parent[0].firstElementChild) {
        parent.remove();
    }
}

你们每个Rhandler都会这样称呼它：

$( "#item-close1" ).click(function() {
    removeAndRemoveParentIfEmpty($("#li-item1"));
});

---

旁注：与其使用

id

s，不如使用列表的结构。除其他事项外，这意味着您可以连接单个处理程序（到列表），然后在该单个处理程序中处理此问题：

$(".divArea").on("click", ".item-close", function() {
    var $this = $(this);
    var li = $this.closest("li");
    var parent = li.parent();
    li.remove();
    if (!parent[0].firstElementChild) {
        parent.remove();
    }
});

---

旁注2：您的HTML无效。您不能将

li

作为

div

的直接子级，它只能是

ul

或

ol

（或

template

，但是…）的直接子级。你也需要解决这个问题

---

修复标记并使用非

id

事件委派解决方案的实时示例：

$（.divArea”）。在（“单击”，“项目关闭”，函数（）上{
var$this=$（this）；
var li=$this.closest（“li”）；
var parent=li.parent（）；
li.remove（）；
如果（！parent[0].firstElementChild）{
parent.remove（）；
}
});
.divArea{
边框：1px纯黑；
}

项目1[x]
第2项[x]

只需检查项目是否为最后一项：

$( "#item-close1" ).click(function() {
    if ($(".divArea > li").length === 1) {
      $("#li-item1").remove();
    } else {
      $(".divArea").remove();
    }
});

$（“#项关闭1”）。单击（函数（）{
$（“#li-item1”）.remove（）；
//检查是否有任何其他

if（！$（this.parent（）.find（“li”）.length）{
//如果不是，请删除父元素
$（this.parent（）.remove（）；
}
});

也就是说，您的标记在语义上是不正确的。所有
必须是
或
或
的子代

请参阅：
首先，请注意您的HTML无效。您不能将
li
作为
div
的子级。它们需要在
ul
范围内。这会稍微改变您的逻辑，因为您需要确定删除
li
时
ul
是否为空，如果为空，请删除父
div

其次，不要使用增量
id
属性。它们最终会让你重复你的代码，或者让代码变得更加复杂。在元素上使用公共类，并遍历DOM以查找相关元素

对于实际问题，在删除
li
后，检查
ul
的
子项（）
的
长度
，如果没有剩余，则删除
div
。试试这个：


var$div=$（'.divArea'）；
var$ul=$div.find（'ul'）；
$（“.item close”）。单击（函数（）{
$（this）.closest（'.li item'）.remove（）；
如果（$ul.children（）.length==0）
$div.remove（）；
});
ul{
边框：2px实心#C00；
}



项目1
X


项目2
X


我不能100%确定您面临的情况，但这里有一些代码修复：


$（文档）.ready（函数（）{
$（“#项关闭1”）。单击（函数（）{
$（“#li-item1”）.remove（）；
});
$（“#项关闭2”）。单击（函数（）{
$（“#li-item2”）.remove（）；
});  
$（“.divArea”）。每个（函数（）{
if（$（this.children（）.length==0）{
$（this.remove（）；
}
});
});

经过测试，这项工作使用如下形状：注意：我修复了您的html以包含

<div class="divArea">
  <ul class="lis">
    <li class="li-item" id="li-item1">Item 1 <span class="icon icon-close item-close" id="item-close1"></span></li>
    <li class="li-item" id="li-item2">Item 2 <span class="icon icon-close item-close" id="item-close2"></span></li>
  </ul>
</div>



第1项
第2项


js

$（.lis.li项”）。在（“单击”，函数（）上{
var litm=$（此）；
litm.remove（）；
变量项=$（“.lis”）.children（）.length；
如果（items==null | | items只是一个旁注，但您的html无效-li必须是ul或olso的子级，请添加一个检查以查看父级中是否有任何元素，看起来很简单。根据需要，您还可以使用litm.parent（）.remove（）；vs$（.divArea”）.remove（）；
$( "#item-close1" ).click(function() {
    $("#li-item1").remove();
    // check if there are any other <li>'s
    if(!$(this).parent().find("li").length){
        // if not, remove the parent element
        $(this).parent().remove();
    }
});

<div class="divArea">
  <ul class="lis">
    <li class="li-item" id="li-item1">Item 1 <span class="icon icon-close item-close" id="item-close1"></span></li>
    <li class="li-item" id="li-item2">Item 2 <span class="icon icon-close item-close" id="item-close2"></span></li>
  </ul>
</div>

$( ".lis .li-item" ).on( "click", function() {
   var litm = $( this );
   litm.remove();
   var items = $(".lis").children().length;

  if (items == null || items <= 0) {
    $(".divArea").remove();
  }

});