Question

如何使用jQuery删除＆＃34; li_1＆＃34;下的所有元素？（但不能删除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

可能是你的标记有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 2

您的标记不正确，您应该更改下面的标记，

<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 3

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

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

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

jQuery删除嵌套的ul / li

3 个答案: