jQuery刪除嵌套的ul / li

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不是li_1的孩子。 首先修復該標記，然后嘗試使用empty方法刪除所有匹配元素集的所有子節點，然后使用empty方法刪除所有子元素。

標記變更

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

s

$('#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(); 。 它將刪除此元素及其所有子元素（實際上，它們是元素的一部分）。

您可以使用一些自動化方法。 例如，如果您具有此li元素的id ，則可以編寫$('#'+id).next().remove(); 。

如果這是HTML中的錯誤，請參閱ShankarSangoli答案。