Jquery: Closest() row remove not working

Question

I have a script that adds a set of rows to allow you to capture information for an additional visitor in a SharePoint List Form. I have two anchor tags, one for add and the other for remove. When I add a new visitor it works, and also when I remove the visitor it still works but If I try to add again it brings back the previously removed rows plus the newly added row. Does anyone know how I can resolve this issue?

The script and source I have written:

function addVisitor(sender) {
    var newVisitor = "<tr class='newVisitor'><td nowrap='true' valign='top' width='113px' class='ms-formlabel'><span class='ms-h3 ms-standardheader' ><nobr>Visitor name</nobr></span></td><td valign='top' width='350px' class='ms-formbody'><span dir='none'><input type='text'  maxlength='255'  title='Visitor name' class='ms-long ms-spellcheck-true'><br></span></td></tr><tr><td nowrap='true' valign='top' width='113px' class='ms-formlabel'><span class='ms-h3 ms-standardheader' ><nobr>Visitor surname</nobr></span></td><td valign='top' width='350px' class='ms-formbody'><span dir='none'><input type='text'  maxlength='255'  title='Visitor surname' class='ms-long ms-spellcheck-true'><br></span></td></tr><tr><td nowrap='true' valign='top' width='113px' class='ms-formlabel'><span class='ms-h3 ms-standardheader' id='Visitor_x0020_email'><nobr>Visitor email*</nobr></span></td><td valign='top' width='350px' class='ms-formbody'><span dir='none'><input type='text' value='' maxlength='255'  title='Visitor email Required Field' style='ime-mode : ' class='ms-long ms-spellcheck-true'><br></span></td></tr><tr style='display:none;' class='vReg'><td nowrap='true' valign='top' width='113px' class='ms-formlabel'><span class='ms-h3 ms-standardheader' id='Vehicle_x0020_registration'><nobr>Vehicle registration</nobr></span></td><td valign='top' width='350px' class='ms-formbody'><span dir='none'><input type='text' value='' maxlength='255' title='Vehicle registration' style='ime-mode : ' class='ms-long ms-spellcheck-true'><br></span></td>" + addBtn + "</tr>";

    $(newVisitor).insertAfter(sender);
if (hideReg)
    $('.vReg').hide();
else
    $('.vReg').show();

$('.add').on('click', function () {
    var sender = $(this).closest('tr')[0];
    $(this).hide();
    addVisitor(sender);
    $('.add').hide();
    $('.add:last').show();

});

$('.remove').on('click', function () {
    var sender = $(this).closest('tr')[0];
    $(this).hide();
    $('.add').hide();
    removeVisitor(sender);
    $('.add:last').show();
});

}

function removeVisitor(sender) {
    var rowPos = $(sender).index();
    $(sender).remove(); // remove current
   // $('.ms-formtable tr').eq(rowPos - 1);
    for (var i = 1; i<=4; i++) {
        $($('.ms-formtable tr')[rowPos - i]).remove();
    }      

}

Answer 1

You should move the event attachments out of the addVisitor method.

$('.remove').on('click', function () { ... }

And

$('.add').on('click', function () { ... }

If not, the app will have a buggy behavior because every time the code calls the method addVisitor it will add a new handler to the event, resulting in more than one call to the callback function when the user clicks on elements with the class .add or .remove.

So the resulting code would be:

function addVisitor(sender) {
    var newVisitor = "<tr class='newVisitor'><td nowrap='true' valign='top' width='113px' class='ms-formlabel'><span class='ms-h3 ms-standardheader' ><nobr>Visitor name</nobr></span></td><td valign='top' width='350px' class='ms-formbody'><span dir='none'><input type='text'  maxlength='255'  title='Visitor name' class='ms-long ms-spellcheck-true'><br></span></td></tr><tr><td nowrap='true' valign='top' width='113px' class='ms-formlabel'><span class='ms-h3 ms-standardheader' ><nobr>Visitor surname</nobr></span></td><td valign='top' width='350px' class='ms-formbody'><span dir='none'><input type='text'  maxlength='255'  title='Visitor surname' class='ms-long ms-spellcheck-true'><br></span></td></tr><tr><td nowrap='true' valign='top' width='113px' class='ms-formlabel'><span class='ms-h3 ms-standardheader' id='Visitor_x0020_email'><nobr>Visitor email*</nobr></span></td><td valign='top' width='350px' class='ms-formbody'><span dir='none'><input type='text' value='' maxlength='255'  title='Visitor email Required Field' style='ime-mode : ' class='ms-long ms-spellcheck-true'><br></span></td></tr><tr style='display:none;' class='vReg'><td nowrap='true' valign='top' width='113px' class='ms-formlabel'><span class='ms-h3 ms-standardheader' id='Vehicle_x0020_registration'><nobr>Vehicle registration</nobr></span></td><td valign='top' width='350px' class='ms-formbody'><span dir='none'><input type='text' value='' maxlength='255' title='Vehicle registration' style='ime-mode : ' class='ms-long ms-spellcheck-true'><br></span></td>" + addBtn + "</tr>";

    $(newVisitor).insertAfter(sender);
    if (hideReg)
        $('.vReg').hide();
    else
        $('.vReg').show();       
}

function removeVisitor(sender) {
    var rowPos = $(sender).index();
    $(sender).remove(); // remove current
   // $('.ms-formtable tr').eq(rowPos - 1);
    for (var i = 1; i<=4; i++) {
        $($('.ms-formtable tr')[rowPos - i]).remove();
    }            
}


$('.add').on('click', function () {
    var sender = $(this).closest('tr')[0];
    $(this).hide();
    addVisitor(sender);
    $('.add').hide();
    $('.add:last').show();

});

$('.remove').on('click', function () {
    var sender = $(this).closest('tr')[0];
    $(this).hide();
    $('.add').hide();
    removeVisitor(sender);
    $('.add:last').show();
});