隐藏切换按钮，如果没有孩子div

Question

我需要隐藏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>