如果沒有子div存在，隱藏切換按鈕

Question

如果此特定子組中沒有子div，我需要隱藏toggler_btn。 我已經添加了數據屬性，我認爲他們必須做些事情。但不知道。

我已經試過這樣：

$('.toggler_btn').each(function() { 
      var elem_id = $(this).data('id'); 

      if ($('.element_wrapper[data-parent="' + elem_id + '"]').children().length === 0) { 
       $(this).hide(); 
      } 
     }); 

和它的作品，但也許有一個更簡單，更快捷的方式做到這一點？

HTML：

<div id="wrapper"> 
      <div class="element_wrapper" data-id="20" data-parent="" style="display:none"> 
      <button class="toggler_btn" type="button" data-id="20" data-parent="">+</button> 
      Building 1 
      <button class="add_btn" type="button">Add</button> 
      <button class="edit_btn" type="button" data-id="20" data-parent="">Edit</button> 
      <button class="delete_btn" type="button" data-id="20">Delete</button> 
     <div class="element_wrapper" data-id="25" data-parent="20" style="display:none"> 
      <button class="toggler_btn" type="button" data-id="25" data-parent="20">+</button> 
      Something Else 
      <button class="add_btn" type="button">Add</button> 
      <button class="edit_btn" type="button" data-id="25" data-parent="20">Edit</button> 
      <button class="delete_btn" type="button" data-id="25">Delete</button> 
     </div> 
     </div> 

Answer 1

希望這能解決你的問題，否則讓我知道。

更新：我改變的是我的一部分，是一個有點動態的，所以它會與多層次

$(document).ready(function() { 
 
    $('div[data-parent=""]').show(); 
 

 
    $('.toggler_btn').on('click', function() { 
 
    var id = $(this).attr('data-id'); 
 

 
    if ($('.element_wrapper[data-parent="' + id + '"]').children().length > 0) { 
 
     $('.element_wrapper[data-parent="' + id + '"]').toggle(); 
 
     if ($(this).text() === '+') { 
 
     $(this).html('-'); 
 
     } else { 
 
     $(this).html('+'); 
 
     } 
 

 

 
     var t = $('.element_wrapper[data-parent="' + id + '"]').children(".toggler_btn"); 
 
     if (t.siblings(".element_wrapper").length == 0) { 
 
     $('.element_wrapper[data-parent="' + id + '"]').children(".toggler_btn").hide(); 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="element_wrapper" data-id="20" data-parent="" style="display:none"> 
 
    <button class="toggler_btn" type="button" data-id="20" data-parent="">+</button> Building 1 
 
    <button class="add_btn" type="button">Add</button> 
 
    <button class="edit_btn" type="button" data-id="20" data-parent="">Edit</button> 
 
    <button class="delete_btn" type="button" data-id="20">Delete</button> 
 
    <div class="element_wrapper" data-id="25" data-parent="20" style="display:none"> 
 
     <button class="toggler_btn" type="button" data-id="25" data-parent="20">+</button> Something Else 
 
     <button class="add_btn" type="button">Add</button> 
 
     <button class="edit_btn" type="button" data-id="25" data-parent="20">Edit</button> 
 
     <button class="delete_btn" type="button" data-id="25">Delete</button> 
 
     <div class="element_wrapper" data-id="30" data-parent="25" style="display:none"> 
 
     <button class="toggler_btn" type="button" data-id="30" data-parent="25">+</button> Something Else 
 
     <button class="add_btn" type="button">Add</button> 
 
     <button class="edit_btn" type="button" data-id="30" data-parent="25">Edit</button> 
 
     <button class="delete_btn" type="button" data-id="30">Delete</button> 
 
     </div> 
 
    </div> 
 
    </div>

---

更新2的工作：因爲你偶然發現你的jQuery代碼，我更新了第二個代碼片段以匹配你的新代碼。

$('.toggler_btn').each(function(i) { 
 
    if (i == 0) { 
 
    $(this).parent().show() 
 
    } 
 
    var elem_id = $(this).data('id'); 
 
    if ($('.element_wrapper[data-parent="' + elem_id + '"]').children().length === 0) { 
 
    $(this).hide(); 
 
    } 
 
}); 
 

 
$('.toggler_btn').on('click', function() { 
 
    var id = $(this).attr('data-id'); 
 

 
    if ($('.element_wrapper[data-parent="' + id + '"]').children().length > 0) { 
 
    $('.element_wrapper[data-parent="' + id + '"]').toggle(); 
 
    if ($(this).text() === '+') { 
 
     $(this).html('-'); 
 
    } else { 
 
     $(this).html('+'); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="element_wrapper" data-id="20" data-parent="" style="display:none"> 
 
    <button class="toggler_btn" type="button" data-id="20" data-parent="">+</button> Building 1 
 
    <button class="add_btn" type="button">Add</button> 
 
    <button class="edit_btn" type="button" data-id="20" data-parent="">Edit</button> 
 
    <button class="delete_btn" type="button" data-id="20">Delete</button> 
 
    <div class="element_wrapper" data-id="25" data-parent="20" style="display:none"> 
 
     <button class="toggler_btn" type="button" data-id="25" data-parent="20">+</button> Something Else 
 
     <button class="add_btn" type="button">Add</button> 
 
     <button class="edit_btn" type="button" data-id="25" data-parent="20">Edit</button> 
 
     <button class="delete_btn" type="button" data-id="25">Delete</button> 
 
     <div class="element_wrapper" data-id="30" data-parent="25" style="display:none"> 
 
     <button class="toggler_btn" type="button" data-id="30" data-parent="25">+</button> Something Else 
 
     <button class="add_btn" type="button">Add</button> 
 
     <button class="edit_btn" type="button" data-id="30" data-parent="25">Edit</button> 
 
     <button class="delete_btn" type="button" data-id="30">Delete</button> 
 
     </div> 
 
    </div> 
 
    </div>