0

I have the below code that adds a new record to a page and updates two HTML elements with the new count of records fine.

The issue is when a new record is added and the .remove_pse_record is clicked the record count will update by 1,2,3,4 etc. it seems to be remembering how many records are deleted and increases the value so lets say the record count is 10 and I remove a record the count will be 9, the second record I remove the count will now be 7.

$(".remove_pse_record").click(function(e) {
    $("#" + $(this).data("id")).fadeTo("slow", 0.00, function(){
       $(this).slideUp("slow", function() {
           $(this).remove();
       });
    });

    update_record_count(".pse_record_count");

    e.preventDefault();
});

$("#add_pse_exception").click(function(e) {
    last_id = $("#configuration > div").last().data("id");
    next_id = last_id + 1

    new_record = "<div id=\"a_" + next_id + "\" data-id=\"" + next_id + "\" class=\"record\">" +
"<div class=\"full_col\">" +
    "<div><div>Notes:</div><div><textarea name=\"a_notes_" + next_id + "\"></textarea></div></div>" +
"</div>" +
"<div class=\"full_col separator\">" +
    "<ul>" +
        "<li><a href=\"#\" title=\"Remove new record\" class=\"remove_pse_record\" data-id=\"a_" + next_id + "\"><i class=\"fa-solid fa-trash remove_icon\"></i></a></li>" +
    "</ul>" +
"</div>" +
"</div>"

    $(new_record).insertAfter($("#configuration > div").last());
    update_record_count(".pse_record_count", true);

    $(".remove_pse_record").click(function(e) {
        $("#" + $(this).data("id")).fadeTo("slow", 0.00, function(){
           $(this).slideUp("slow", function() {
               $(this).remove();
           });
        });

        update_record_count(".pse_record_count");

        e.preventDefault();
    });

    e.preventDefault();
});

function update_record_count(element, increase=false) {
    count = parseInt($(element + ":first").text());
    
    $(element).each(function() {
        if (increase) {
            $(this).text(count + 1);
        } else {
            $(this).text(count - 1);
        }
    });
}
llanato
  • 2,508
  • 6
  • 37
  • 59
  • Every time you click on `#add_pse_exception` you call `$(".remove_pse_record").click()`. This adds another click handler to all the old `.remove_pse_record` elements, not just the one you created. – Barmar Feb 10 '23 at 01:43
  • Your title mentions event delegation. Why aren't you using that? – Barmar Feb 10 '23 at 01:43

0 Answers0