jquery doenst append a count correctly

Question

I want to create dynamically rows with jquery and for each new row adding a counting number from 1 to 2 etc. but when i click on add row the first click goes good, but then after that it counts on the existing ones and i only need 1, 2, 3, 4, 5, etc. What am i doing wrong ?

Fiddle: Click

HTML:

<div class="row">I'm a row<p></p></div>

<a href="#" class="add_row">Add Row</a>

CSS:

.row {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 5px;
    background-color: slateGrey;
    float: left;
}

a.add_row {
    float: left;
}

JQUERY:

$("a.add_row").click(function() {

                var $row = $("body .row").first().html();

                var $remove_row = ("<a href='#' class='remove_row'>remove</a>");

                $(this).before("<div class='row'>"+ $row +"</div>");

                $(this).prev().append($remove_row);

                var count = 0;

                $(".remove_row").click(function() {

                    var $remove = $(this).parent();

                    $remove.remove();

                    return false;
                });

                $(".row").each(function() {
                    count++;

                        $(this).append(count);

                });

                return false;

            });

score 1 · Accepted Answer · answered Jan 03 '14 at 12:55

I have refactored your code to achieve the functionality. Here it goes

HTML:

<div class="container">
    <div class="row">
        <p>I'm a row</p>
    </div>

</div>
<a href="#" class="add_row">Add Row</a>

JS:

var count = 0;
$("a.add_row").click(function() {

                var remove_row = ("<br><a href='#' class='remove_row'>remove</a>");


                count++;
              var cloned = $('.container').children('.row').first().clone();     
    cloned.appendTo('.container');



    cloned.find('p').append(count);
    cloned.find('p').append(remove_row);
});

$('body').on('click', '.remove_row', function(){
    $(this).closest('.row').fadeOut();
    count--;

});

DEMO: Fiddle

score 1 · Answer 2 · answered Jun 16 '17 at 07:40

The interesting thing about the solutions containing count downs (such as i-- and count--) is that when you remove a value that is not the last value ( for instance you append 4 new items to the list for a new total of 5, you remove item number 2) then append a new item the new item will have the last items number rather than the number of the item that was removed.

I think one solution, though it may not be the most efficent is to remove the i--/count-- entirely and read each number into an array then upon re addition of an item, look through the array for the missing number in the sequence (Arrays - Find missing numbers in a Sequence) and use the missing number, if there is no missing number then ++ the count.

score 0 · Answer 3 · answered Jan 03 '14 at 11:26

Put your var count outside of the function.

var count = 0; //like this
$("a.add_row").click(function() {
            var $row = $("body .row").first().html();

            var $remove_row = ("<a href='#' class='remove_row'>remove</a>");

            $(this).before("<div class='row'>"+ $row +"</div>");

            $(this).prev().append($remove_row);

            $(".remove_row").click(function() {

                var $remove = $(this).parent();

                $remove.remove();

                return false;
            });

            $(".row").each(function() {
                count += 1; // this adds one each time, or count++ , I prefer the first

                    $(this).append(count);

            });

            return false;

        });

But im counting the existing div.row with .each and then im adding 1. When i click add_row it copys the first row but also the counting numbers inside there and i dont need that. look in the fiddle — Julez, Jan 03 '14 at 11:35

jquery doenst append a count correctly

3 Answers3