CODEWITHSUNDEEP
jqueryhtmlappend
Leon
Leon

Reputation: 329

Re-order the appended element numbering using jQuery after deletion

How to make the appended element re-ordered again after do some deletion of data? I made an example as follow and the number of the appended is staying the same number after deletion.

$(document).ready(function(){
	$('.do-append').on('click', function(){
  	var index = $('append div').length;
  	$('append').append('<div><label>Appended : '+index+'</label> &emsp; <a href="javascript:;" class="delete" style="color: red">delete</a></div>');
  });
  
  $('append').on('click', '.delete', function(e){
  	$(e.target).closest('append div').remove();
  });
})
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<a href="javascript:;" class="do-append">click me</a><br><br>
<append></append>

</body>
</html>

Upvotes: 1

Views: 235

Answers (2)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can try below logic where you can update label under div which are after deleted element.

$(document).ready(function(){
	$('.do-append').on('click', function(){
  	var index = $('append div').length;
  	$('append').append('<div><label>Appended : '+index+'</label> &emsp; <a href="javascript:;" class="delete" style="color: red">delete</a></div>');
  });
  
  $('append').on('click', '.delete', function(e){
  	var $parent = $(e.target).closest('append div');
    var index = $parent.index();
    $parent.remove();
    if(index>0) {
      $('append div:gt('+ (index-1) +')').each(function(){
         $('label', this).html('Appended : '+index);
         index++;
       }); 
    } else {
        $('append div').each(function(){
         $('label', this).html('Appended : '+ index);
         index++;
      });
    }
  });
})
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<a href="javascript:;" class="do-append">click me</a><br><br>
<append></append>

</body>
</html>

Upvotes: 1

Nandita Sharma
Nandita Sharma

Reputation: 13407

Create an updateLabels function like below and call it on addition and deletion of item

function updateLabels() {
    var index = $('append div').length;
    for (var i = 0; i < index; i++) {
      $($($('append div')[i]).find("label")[0]).text('Appended : ' + i);
    }
  }


$(document).ready(function() {
  $('.do-append').on('click', function() {
    var index = $('append div').length;
    $('append').append('<div><label></label> &emsp; <a href="javascript:;" class="delete" style="color: red">delete</a></div>');
    updateLabels();
  });

  $('append').on('click', '.delete', function(e) {
    $(e.target).closest('append div').remove();
    updateLabels();
  });

  function updateLabels() {
    var index = $('append div').length;
    for (var i = 0; i < index; i++) {
      $($($('append div')[i]).find("label")[0]).text('Appended : ' + i);
    }
  }
})
<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

  <a href="javascript:;" class="do-append">click me</a><br><br>
  <append></append>

</body>

</html>

Upvotes: 0

Related Questions