CODEWITHSUNDEEP
javascriptjquery
NekoLopez
NekoLopez

Reputation: 609

How to reset count and modify class name when many DIV elements are removed using Jquery

I have div elements with a delete button each one, like this example:

<div class="elfile_1 fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(1)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
<div class="elfile_2 fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(2)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
<div class="elfile_3 fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(3)"><i class="fa fa-times" aria-hidden="true"></i></button></div>

<script>
 function delete_file(idx){
  $('.elfile_'+idx).remove();
 }
</script>

This works great but now I want to reset count of these elements, so I tried changing to this:

function delete_file(idx){
  $('.elfile_'+idx).remove();
  var inputs = $(".fcot");

  for(var i = 0; i < inputs.length; i++){ 
    $(".fcot").each(function(){              
       $(this).attr('class',$(this).attr('class').replace(/\belfile.*?\b/g, ''));
       $(this).addClass('elfile_'+i);

       $(this).find('button').each(function() {
           $(this).attr('onclick', 'delete_file('+i+')');
       });
    });
  }
}

But, for example, when I delete the second element It's not working because I obtain this:

<div class="fcot  elfile_1">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(1)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
<div class="fcot  elfile_1">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(1)"><i class="fa fa-times" aria-hidden="true"></i></button></div>

And I want to get this:

<div class="fcot  elfile_1">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(1)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
<div class="fcot  elfile_2">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(2)"><i class="fa fa-times" aria-hidden="true"></i></button></div>

How can I fix it?

I'd like your help.

Upvotes: 1

Views: 74

Answers (2)

bipen
bipen

Reputation: 36541

If you are using counter just to know the element that needs to be deleted then trust me.. don't do that at all. There is an easier way to do so.

Pass 'this' context in onclick and use that in javascript.

  function delete_file(me) {
    $(me).closest('div.fcot').remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(this)"><i class="fa fa-times" aria-hidden="true">a</i></button></div>
<div class="fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(this)"><i class="fa fa-times" aria-hidden="true">b</i></button></div>
<div class="fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm" onclick="delete_file(this)"><i class="fa fa-times" aria-hidden="true">c</i></button></div>

NOTE:

I would recommend to keep the code clean and separate out the javascript and HTML. eg:

HTML:

<div class="fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm some-button-name"><i class="fa fa-times" aria-hidden="true"></i></button></div>
<div class="fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm some-button-name"><i class="fa fa-times" aria-hidden="true"></i></button></div>
<div class="fcot">lorem ipsum <button type="button" class="btn btn-default btn-sm some-button-name"><i class="fa fa-times" aria-hidden="true"></i></button></div>

Javascript:

$(function(){ //ready function to make sure DOM is loaded
    $('.some-button-name').click(function(){
          $(this).closest('div.fcot').remove(); 
     });  
});

Issue in your script

If in case, you want to go with your way (messy way :)) then the issue with your code is, you have two loops there 1) for and 2) foreach. i remains same for a single iteration of foreach which is causing the issue. foreach() is passed an array index and a corresponding array value each time. so use that:

function delete_file(idx){
  $('.elfile_'+idx).remove();
  var inputs = $(".fcot");

  //for(var i = 0; i < inputs.length; i++){ 
    $(".fcot").each(function(i,v){              
       $(this).attr('class',$(this).attr('class').replace(/\belfile.*?\b/g, ''));
       $(this).addClass('elfile_'+ (i + 1)); // i + 1 here since index starts from 0

       $(this).find('button').each(function() {
           $(this).attr('onclick', 'delete_file('+ (i + 1) +')');
       });
    });
  //}
}

fiddle link Been a while that I have used stackoverflow so not sure if I can have two snippets in one answer so adding fiddle link. If it is possible then It will be great if someone can edit the answer and add fiddle content on it. :)

Upvotes: 2

Jobse
Jobse

Reputation: 174

You shouldn't use the i value of for loop but of the each loop. So:

function delete_file(idx){
  $('.elfile_'+idx).remove();
  var inputs = $(".fcot");

  for(var i = 0; i < inputs.length; i++){ 
    var j = 1;
    $(".fcot").each(function(){              
       $(this).attr('class',$(this).attr('class').replace(/\belfile.*?\b/g, ''));
       $(this).addClass('elfile_' + j);

       $(this).find('button').each(function() {
           $(this).attr('onclick', 'delete_file('+i+')');
       });

       j++;
    });
  }
}

Upvotes: 0

Related Questions