Question

我的HTML（精简版）

<ul>
   <li>
      <p></p>
      <p></p>
      <button type="button">Remove</button>
   </li>
   <li>
      <p></p>
      <p></p>
      <button type="button">Remove</button>
   </li>
</ul>

我的JavaScript

$('body').on('click', 'li > button', function() {
  $(this).parent().remove();

  if($('li > button').length === 1) { // if this is the only button
    $(this).parent().parent().remove(); // remove whole list
    // remove some other elements outside the list      
  }

  if($(this).parent().is(':first')) { // if this first li in ul 
    if (confirm("...")) {
      $(this).parent().remove();    
    }
  }
});

基本上，我要做的是：

制作第一个按钮以删除父列表项
如果按钮是<ul>中唯一一个删除整个列表和另一个元素

我怎样才能正确地完成这项工作？

Answer 1

你只需要评估是否有多个元素，试试这个：

＆＃13;

$('body').on('click', 'li > button', function() {
   if(($('li > button').length > 1)) {
     $(this).parent().remove();
   } else {
     $(this).parents('ul').remove();
     console.log('Remove other items')
   }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li>
      <p></p>
      <p></p>
      <button type="button">Remove</button>
   </li>
   <li>
      <p></p>
      <p></p>
      <button type="button">Remove</button>
   </li>
</ul>

＆＃13;

Answer 2

更改您的功能以检查上一个<li>是否已删除（阅读：<ul>不再有<li>）：

$('body').on( 'click', 'li > button', function() {
    var list = $(this).closest( 'ul' );

    $(this).parent().remove()

    //* if the UL is empty we can remove it altogether
    if( list ).find( 'li' ).length == 0 ) remove( list ); 
});

仅在列表中的第一个按钮添加功能

2 个答案: