jQuery的删除嵌套的UL /李

Question

使用jQuery删除“li_1”下的所有元素怎么办（但不能删除li_1）

<ul id="ul_1"> 
    <li id="li_1">1.1 //want to delete all its child elements 
     <ul id="ul_1.1">  
      <li id="li_1.1.1">1.1.1</li> 
      <li id="li_1.1.2">1.1.2 
       <ul id="ul_1.1.2"> 
       <li id="li_1.1.2.1">1.1.2.1</li> 
       <li id="li_1.1.2.2">1.1.2.2</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li id="li_2">1.2</li> 
    <li id="li_3">1.3</li> 
</ul> 

Answer 1

您的标记不正确，你应该改变你的标记类似下面，

<ul id="ul_1"> 
    <li id="li_1">1.1 //want to delete all its child elements 
     <ul id="ul_1.1">  
      <li id="li_1.1.1">1.1.1</li> 
      <li id="li_1.1.2">1.1.2</li> 
       <ul id="ul_1.1.2"> 
       <li id="li_1.1.2.1">1.1.2.1</li> 
       <li id="li_1.1.2.2">1.1.2.2</li> 
       </ul> 
     </ul> 
    </li>    // <-- Moved your sublist #ul_1.1 inside the li #li_1 
    <li id="li_2">1.2</li> 
    <li id="li_3">1.3</li> 
</ul> 

，改变你的JS是，

$('#li_1 ul').remove(); 

Answer 2

可能是你的标记有一个bug。其实你提到的ul不是li_1的孩子。首先修复该标记并尝试使用empty方法删除其所有子代码，该方法将删除DOM中匹配元素集的所有子节点。

标记变化

<ul id="ul_1"> 
    <li id="li_1">1.1 //want to delete all its child elements 
     <ul id="ul_1.1">  
      <li id="li_1.1.1">1.1.1</li> 
      <li id="li_1.1.2">1.1.2 
       <ul id="ul_1.1.2"> 
       <li id="li_1.1.2.1">1.1.2.1</li> 
       <li id="li_1.1.2.2">1.1.2.2</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li id="li_2">1.2</li> 
    <li id="li_3">1.3</li> 
</ul> 

的js

$('#li_1').empty();//will empty everything from this li element 

如果你只是想删除的子ul那就试试这个

$('#li_1 > ul').remove(); 

Answer 3

你li_1元素没有任何的孩子，因为我们可以清楚地看到。如果你想删除<ul id="ul_1.1">，你可以简单地使用$('#ul_1.1').remove();。它将删除此元素及其所有子元素（实际上它们是元素的一部分）。

你可以使用一些自动化。例如，如果您具有此li元素的id，则可以编写$('#'+id).next().remove();。

如果这是您的HTML中的错误，请参阅ShankarSangoli答案。