Append and remove rows dynamically with row count (index)

Question

I have to make a functionality that user can add and remove rows with input fields. Problem is that I need a row index (number) in front of each row in correct order(1., 2., 3. etc.) also when one or more rows are removed and then added again. I can add rows but I can`t get the counting right because If I remove them then count starts with 4 but I need 1 or if second row gets removed then i need 2 instead of 4. .

I have made it with append() and so far so good but I also need row cont in front of each row. I have a counter but lets say I add 1 row and it gives number 1 and 2. If I remove second row and add another again, now the count is 1 and 3

Note that "add" button is only one and separated from append();

           <div id="append-component-row">
                                        <div id="cargo-component-wrap-0" class="row cargo-component-wrap">
                                            <div class="col-xl-1">
                                                <div class="form-group">
                                                    <label for="example-text-input" class="control-label">Nr.</label>
                                                    <div class="input-group component-index">
                                                        1.
                                                    </div><!-- input-group -->
                                                </div>
                                            </div>
                                            <div class="col-xl-1">
                                                <div class="form-group">
                                                    <label for="example-text-input" class="control-label">PCS</label>
                                                    <div class="input-group" style="width:75%;">
                                                        <input id="component-pcs" name="component[0][pcs]" class="form-control component-pcs" type="text">
                                                    </div><!-- input-group -->
                                                </div>
                                            </div>
                                            <div class="col-xl-1">
                                                <div class="form-group">
                                                    <label class="control-label">Length</label>
                                                    <div class="input-group">
                                                        <input id="component-length-0" name="component[0][length]" class="form-control checklist-length" type="text">
                                                    </div><!-- input-group -->
                                                </div>
                                            </div>
                                            <div class="col-md-1">
                                                <div class="form-group">
                                                    <label class="control-label">Width</label>
                                                    <div class="input-group">
                                                        <input id="component-width-0" name="component[0][width]" class="form-control checklist-width" type="text">
                                                    </div><!-- input-group -->
                                                </div>
                                            </div>
                                            <div class="col-xl-1">
                                                <div class="form-group">
                                                    <label class="control-label">Height</label>
                                                    <div class="input-group">
                                                        <input id="component-height-0" name="component[0][height]" class="form-control checklist-height" type="text">
                                                    </div><!-- input-group -->
                                                </div>
                                            </div>
                                            <div class="col-xl-1">
                                                <div class="form-group">
                                                    <label for="example-text-input" class="control-label">Weight</label>
                                                    <div class="input-group">
                                                        <input name="component[0][weight_kg]" class="form-control component-weight" type="text">
                                                    </div><!-- input-group -->
                                                </div>
                                            </div>
                                            <div class="col-xl-1">
                                                <div class="form-group">
                                                    <label for="example-text-input" class="control-label">Volume</label>
                                                    <div class="input-group">
                                                        <input id="cargo-component-volume-0" name="component[0][volume]" class="form-control checklist-volume" type="text">
                                                    </div><!-- input-group -->
                                                </div>
                                            </div>
                                            <div class="col-xl-2">
                                                <div class="form-group">
                                                    <label for="example-text-input" class="control-label">Special cargo types</label>
                                                    <div class="input-group">
                                                        <input name="component[0][cargo_type_1]" class="form-control" type="text">
                                                        <input name="component[0][cargo_type_2]" class="form-control" type="text">
                                                        <input name="component[0][cargo_type_3]" class="form-control" type="text">
                                                    </div><!-- input-group -->
                                                </div>
                                            </div>
                                            <div class="col-xl-2">
                                                <div class="form-group">
                                                    <label for="example-text-input" class="control-label">Add comment</label>
                                                    <div class="input-group">
                                                        <label class="checkbox-container">
                                                            <input name="component[0][add]" type="checkbox" class="add-to-comment" data-id="1." value="0">
                                                            <span class="checkmark"></span>
                                                        </label>
                                                    </div><!-- input-group -->
                                                </div>
                                            </div>
                                            <div class="col-xl-1">
                                                <div class="form-group text-center">
                                                    <i class="ion-trash-a remove-row"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
 <div class="col-md-1">
                                            <div class="form-group text-center">
                                                <i id="add-to-component-row" class="ion-android-add add-row"></i>
                                            </div>
                                        </div>
<script>
var component_counter = 1;

        $('#add-to-component-row').on('click', function(){
            component_counter++;
            $('#append-component-row').append(
                '                                        <div id="cargo-component-wrap-'+component_counter+'" class="row cargo-component-wrap">\n' +
                '                                            <div class="col-xl-1">\n' +
                '                                                <div class="form-group">\n' +
                '                                                    <label for="example-text-input" class="control-label">Nr.</label>\n' +
                '                                                    <div class="input-group">\n' +
                                                                    '<input class="component-index" />\n' +
                '                                                        .\n' +
                '                                                    </div><!-- input-group -->\n' +
                '                                                </div>\n' +
                '                                            </div>\n' +
                '                                            <div class="col-xl-1">\n' +
                '                                                <div class="form-group">\n' +
                '                                                    <label for="example-text-input" class="control-label">PCS</label>\n' +
                '                                                    <div class="input-group" style="width:75%;">\n' +
                '                                                        <input id="component-pcs'+component_counter+'" name="component['+component_counter+'][pcs]" class="form-control component-pcs" type="text">\n' +
                '                                                    </div><!-- input-group -->\n' +
                '                                                </div>\n' +
                '                                            </div>\n' +
                '                                            <div class="col-xl-1">\n' +
                '                                                <div class="form-group">\n' +
                '                                                    <label class="control-label">Length</label>\n' +
                '                                                    <div class="input-group">\n' +
                '                                                        <input id="component-length-'+component_counter+'" name="component['+component_counter+'][length]" class="form-control checklist-length" type="text">\n' +
                '                                                    </div><!-- input-group -->\n' +
                '                                                </div>\n' +
                '                                            </div>\n' +
                '                                            <div class="col-md-1">\n' +
                '                                                <div class="form-group">\n' +
                '                                                    <label class="control-label">Width</label>\n' +
                '                                                    <div class="input-group">\n' +
                '                                                        <input id="component-width-'+component_counter+'" name="component['+component_counter+'][width]" class="form-control checklist-width" type="text">\n' +
                '                                                    </div><!-- input-group -->\n' +
                '                                                </div>\n' +
                '                                            </div>\n' +
                '                                            <div class="col-xl-1">\n' +
                '                                                <div class="form-group">\n' +
                '                                                    <label class="control-label">Height</label>\n' +
                '                                                    <div class="input-group">\n' +
                '                                                        <input id="component-height-'+component_counter+'" name="component['+component_counter+'][height]" class="form-control checklist-height" type="text">\n' +
                '                                                    </div><!-- input-group -->\n' +
                '                                                </div>\n' +
                '                                            </div>\n' +
                '                                            <div class="col-xl-1">\n' +
                '                                                <div class="form-group">\n' +
                '                                                    <label for="example-text-input" class="control-label">Weight</label>\n' +
                '                                                    <div class="input-group">\n' +
                '                                                        <input name="component['+component_counter+'][weight_kg]" class="form-control component-weight" type="text">\n' +
                '                                                    </div><!-- input-group -->\n' +
                '                                                </div>\n' +
                '                                            </div>\n' +
                '                                            <div class="col-xl-1">\n' +
                '                                                <div class="form-group">\n' +
                '                                                    <label for="example-text-input" class="control-label">Volume</label>\n' +
                '                                                    <div class="input-group">\n' +
                '                                                        <input id="cargo-component-volume'+component_counter+'" name="component['+component_counter+'][volume]" class="form-control checklist-volume" type="text">\n' +
                '                                                    </div><!-- input-group -->\n' +
                '                                                </div>\n' +
                '                                            </div>\n' +
                '                                            <div class="col-xl-2">\n' +
                '                                                <div class="form-group">\n' +
                '                                                    <label for="example-text-input" class="control-label">Special cargo types</label>\n' +
                '                                                    <div class="input-group">\n' +
                '                                                        <input name="component['+component_counter+'][cargo_type_1]" class="form-control" type="text">\n' +
                '                                                        <input name="component['+component_counter+'][cargo_type_2]" class="form-control" type="text">\n' +
                '                                                        <input name="component['+component_counter+'][cargo_type_3]" class="form-control" type="text">\n' +
                '                                                    </div><!-- input-group -->\n' +
                '                                                </div>\n' +
                '                                            </div>\n' +
                '                                            <div class="col-xl-2">\n' +
                '                                                <div class="form-group">\n' +
                '                                                    <label for="example-text-input" class="control-label">Add comment</label>\n' +
                '                                                    <div class="input-group">\n' +
                '                                                        <label class="checkbox-container">\n' +
                '                                                            <input name="component['+component_counter+'][add]" type="checkbox" class="add-to-comment" data-id="'+component_counter+'." value="0">\n' +
                '                                                            <span class="checkmark"></span>\n' +
                '                                                        </label>\n' +
                '                                                    </div><!-- input-group -->\n' +
                '                                                </div>\n' +
                '                                            </div>\n' +
                '                                            <div class="col-xl-1">\n' +
                '                                                <div class="form-group text-center">\n' +
                '                                                    <i class="ion-trash-a remove-row"></i>\n' +
                '                                                </div>\n' +
                '                                            </div>\n' +
                '                                        </div>'
            );
</script>

So in general I can get counting right until elements are getting removed. If I got 3 rows I got a count 1. 2. 3. but if I remove all of them and add again 3 rows I got 4. 5. 6. BUT I need 1. 2. 3. again

So if I add 1,2,3 and then delete 2 you want the rows to be 1,3,2? Or when you delete 2 does 3 get re-numbered to 2? — Jamiec
– Jamiec, Commented Jun 13, 2019 at 9:09
Sounds like you need something that starts from 1 and sets the value against all rows, rather than trying to update just the row you're dealing with — freefaller
– freefaller, Commented Jun 13, 2019 at 9:10
yes exactly! I need that counting to be 1.2.3 etc no matter which row gets removed — Davis
– Davis, Commented Jun 13, 2019 at 9:11
@Davis you've not answered my question. You need to be specific as to the behaviour you expect — Jamiec
– Jamiec, Commented Jun 13, 2019 at 9:13

freefaller · Accepted Answer · 2019-06-13 09:25:45Z

2

Instead of dealing with individual rows when you add/remove them, you need to cover all rows.

So I would create a single function that renumbers all the rows in the table, calling it when you either add a row or delete an existing row.

Without seeing your code, it's something like the following...

$("#addrow").on("click", function(e) {
  $(".mainbody").append($('<tr><td class="rownumber"></td><td>New</td><td class="removerow">Remove</td></tr>'));
  renumberRows();
});
$(document).on("click", ".removerow", function(e) {
  $(this).closest("tr").remove();
  renumberRows();
});
function renumberRows() {
  $(".mainbody > tr").each(function(i, v) {
    $(this).find(".rownumber").text(i + 1);
  });
}

#addrow, .removerow {
  cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody class="mainbody">
    <tr>
      <td class="rownumber">1</td>
      <td>First</td>
      <td class="removerow">Remove</td>
    </tr>
    <tr>
      <td class="rownumber">2</td>
      <td>Second</td>
      <td class="removerow">Remove</td>
    </tr>
    <tr>
      <td class="rownumber">3</td>
      <td>Third</td>
      <td class="removerow">Remove</td>
    </tr>
  </tbody>
</table>
<div id="addrow">Add</div>

edited Jun 13, 2019 at 9:25

answered Jun 13, 2019 at 9:16

freefaller

20.1k7 gold badges62 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Daan Over a year ago

You need to use $("body").on("click", ".removerow", function(e) {. Because .removerow is dynamically created you have to delegate it to the body function.

freefaller Over a year ago

@Daan - yep, I realised just after posting, have already updated. Thanks for the input though :-)

freefaller Over a year ago

Not a problem @Davis - good luck with the rest of your project. Just remember, jQuery is very powerful for things like this

Jamiec · Accepted Answer · 2019-06-13 09:24:33Z

1

The first thing i'd do is rather than keep a counter, count how many previous "rows" have been added. You can do this by wrapping your row in an element with a class of its own.

$('#add-to-component-row').on('click', function(){
    var count = $('#append-component-row div').length+1;
    $('#append-component-row').append('<div class="row">'+count+'<input type="text"/> <i class="ion-trash-a remove-row"></i></div>')

});

$(document).on('click','.remove-row',function(){
  $(this).closest(".row").remove();
})

.remove-row:before{
 content:'x'
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="append-component-row">

</div>

<button id="add-to-component-row">Add row</button>

But this only partially solves the problem, as if you remove a row in the middle, you need to go through and re-number them all. For this, I suggest you put the number in its own element and re-index on removal of any row:

$('#add-to-component-row').on('click', function(){
    var count = $('#append-component-row div').length+1;
    $('#append-component-row').append('<div class="row"><span class="row-number">'+count+'</span><input type="text"/> <i class="ion-trash-a remove-row"></i></div>')

});

$(document).on('click','.remove-row',function(){
  $(this).closest(".row").remove();
  $('#append-component-row div').each(function(i){
      $('.row-number',this).html(i+1);
  });
})

.remove-row:before{
 content:'x'
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="append-component-row">

</div>

<button id="add-to-component-row">Add row</button>

answered Jun 13, 2019 at 9:24

Jamiec

136k15 gold badges143 silver badges202 bronze badges

2 Comments

Davis Over a year ago

Thanks man! I would love to mark this as answer but there was one guy before you so sorry :) But this solution is great !!!

Jamiec Over a year ago

@Davis hey it's no problem (But an upvote would be nice ;)

Collectives™ on Stack Overflow

Append and remove rows dynamically with row count (index)

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related