All geek questions in one place

Items added later are not deleted.

I wrote the code below to add 5 if I click the "Add" button, but the problem is to remove the button, when I click the "Delete" button, I want to delete the last 5 last lis. But that does not work. here is my snippet:

$(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);
   
  });
  
});
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>
Run codeHide result

thank

+4
source share
4 answers

olis not a parent of a button .remove. You need to slightly change the bypass logic.

5 , .slice(-5). , remove() slideUp(), . slideUp(). :

$(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();
    });
  });
});
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>
Hide result
+4

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>
Hide result
+1

Just go from the parent node to the element you want and slice it into 3

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

    $('ol > li').slice(-3).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 3</div>
      <div class="remove">Remove 3</div>
    </div>
</body>
</html>
Run codeHide result
0
source

Navigate from the parent element to the desired element and then cut it according to your requirement. here 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>
Run codeHide result
0
source

Source: https://habr.com/ru/post/1656584/

More articles:


All Articles