Question

我写下面的代码，当我点击添加按钮时附加5 li但问题是删除按钮，当我点击删除按钮我想删除最近5个最近的lis。但它不起作用。这是我的片段：

＆＃13;

$(document).ready(function () {
  $(".moree").click(function () {
    var delay = 0;
    for (var i = 0; i < 5; i++) {              
      $(this)
        .prev()
        .append('<li style="display:none">Title 2</li>')
        .children()
        .last()
        .hide()
        .delay(delay)
        .slideDown(400);
      delay += 400;
    }
  });
  
    $(".remove").click(function () {
      $(this)
        .parents('ol').remove()
        .slideUp(400);
   
  });
  
});

＆＃13;

ol > li{ list-style:none; padding-top:10px; border:1px solid green;margin-top:10px;}
.moree{ width:30px; background:yellow;}.remove{ width:30px; background:red;}

＆＃13;

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
  </script>
</head>
<body>
  <div class="content">
      <ol>
        <li>title</li>
      </ol>
      <div class="moree">Add 5</div>
      <div class="remove">Remove 5</div>
    </div>
</body>
</html>

＆＃13;

由于

Answer 1

ol不是.remove按钮的父级。您需要稍微修改遍历逻辑。

要获取最后5个元素，请使用.slice(-5)。此外，如果您在致电remove()之前slideUp()这些元素，他们就会消失。您需要先致电slideUp()。试试这个：

＆＃13;

$(document).ready(function() {
  $(".moree").click(function() {
    var delay = 0;
    for (var i = 0; i < 5; i++) {
      $(this).prev().append('<li style="display: none">Title 2</li>').children().last().delay(delay).slideDown(400);
      delay += 400;
    }
  });

  $(".remove").click(function() {
    $(this).closest('.content').find('ol li').slice(-5).slideUp(400, function() {
      $(this).remove();
    });
  });
});

＆＃13;

ol > li {
  list-style: none;
  padding-top: 10px;
  border: 1px solid green;
  margin-top: 10px;
}
.moree {
  width: 30px;
  background: yellow;
}
.remove {
  width: 30px;
  background: red;
}

＆＃13;

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
  </script>
</head>

<body>
  <div class="content">
    <ol>
      <li>title</li>
    </ol>
    <div class="moree">Add 5</div>
    <div class="remove">Remove 5</div>
  </div>
</body>

</html>

＆＃13;

Answer 2

使用parents('div.content')查找主DIV，然后使用ol with li。

$('body').on('click', '.remove',function () {
   $(this)
     .parents('div.content')  //Get the main div
     .find('ol > li:gt(0)')   //Find ol and li index greater then 0
     .slideUp(400,function(){ //Slide up with remove from DOM
         $(this).remove();  
      })
});

$(document).ready(function () {
  $(".moree").click(function () {
    var delay = 0;
    for (var i = 0; i < 5; i++) {              
      $(this)
        .prev()
        .append('<li style="display:none">Title 2</li>')
        .children()
        .last()
        .hide()
        .delay(delay)
        .slideDown(400);
      delay += 400;
    }
  });
  
  $('body').on('click', '.remove',function () {
      $(this)
        .parents('div.content')
        .find('ol > li:gt(0)')
        .slideUp(400,function(){
          $(this).remove();
      })
  });
  
});

ol > li{ list-style:none; padding-top:10px; border:1px solid green;margin-top:10px;}
.moree{ width:30px; background:yellow;}.remove{ width:30px; background:red;}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
  </script>
</head>
<body>
  <div class="content">
      <ol>
        <li>title</li>
      </ol>
      <div class="moree">Add 5</div>
      <div class="remove">Remove 5</div>
    </div>
</body>
</html>

Answer 3

只需从父节点遍历到所需元素并将其切片为3

＆＃13;

ol > li{ list-style:none; padding-top:10px; border:1px solid green;margin-top:10px;}
.moree{ width:30px; background:yellow;}.remove{ width:30px; background:red;}

＆＃13;

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
  </script>
</head>
<body>
  <div class="content">
      <ol>
        <li>title</li>
      </ol>
      <div class="moree">Add 3</div>
      <div class="remove">Remove 3</div>
    </div>
</body>
</html>

＆＃13;

## If on index.php ##
RewriteRule    "^/index\.php$"  "/index.php?url=$1&name=&submit=submit" [R,L]

＆＃13;

Answer 4

从父元素遍历到所需元素，然后根据您的要求进行切片。这是5

$(document).ready(function () {
  $(".moree").click(function () {
    var delay = 0;
    for (var i = 0; i < 5; i++) {              
      $(this)
        .prev()
        .append('<li style="display:none">Title 2</li>')
        .children()
        .last()
        .hide()
        .delay(delay)
        .slideDown(400);
      delay += 400;
    }
  });
  
    $(".remove").click(function () {
 
      $(this).parent('.content').find('ol  li').slice(-5)
        .slideUp(400);
   
  });
  
});

ol > li{ list-style:none; padding-top:10px; border:1px solid green;margin-top:10px;}
.moree{ width:30px; background:yellow;}.remove{ width:30px; background:red;}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
  </script>
</head>
<body>
  <div class="content">
      <ol>
        <li>title</li>
      </ol>
      <div class="moree">Add 5</div>
      <div class="remove">Remove 5</div>
    </div>
</body>
</html>

附加后面的元素不会删除

4 个答案: