Avatar of Coast Line
Coast Line
Flag for Canada asked on

Issues with Jquery Code

I have the following code:

function updateInsertRecords(){arrys = arry.join(",");$('#insertRecords').val(arrys);}
var cnt = 1;
var container = $(document.createElement('span'));
var newitems = $(document.createElement('span'));
$('.span.fixed').before(container);
var arry = [], arrys = "";
$('#btAdd').click(function() {
    var groupname = $(this).attr('data-id');
    var isselect = $(this).attr('data-coral');
    if (cnt <= 9999) {
        cnt = cnt + 1;
        arry.push(cnt);
            $(container).append('<span class="twodelete" data-cnt="' + cnt + '"><div class="margin5px modal-partition"><label for="Name">Name</label><input data-placement=bottom type=text name="field' + '' + cnt + '"  id="field' + '' + cnt + '" class=form-control data-rule-required=true data-msg-required="Provide field details" /></div><div class="margin5px modal-partition"><label for="status' + '' + cnt + '">Status</label><select name="status' + '' + cnt + '" id="status' + '' + cnt + '" class="form-control" data-rule-required="true" data-msg-required="Provide Status details"><option value="1">Active</option><option value="0">Inactive</option></select></div><input type="button" id="btRemove" rel="' + groupname + '_' + cnt + '" value="X" class="sectionBtn bt" /></span>');
    }
    arrys = arry.join(",");
    $('.buttonsPlaceHolder').before(container);
    $('.buttonsPlaceHolder').after(newitems);
    updateInsertRecords();
});
$(document).on('click', '#btRemove', function(){
    var item = $(this).closest('.twodelete');
    var v = item.data('cnt');
    for(var i = arry.length - 1; i >= 0; i--) {
    if(arry[i] === v) {
      arry.splice(i, 1);
      break;
        }
    }
  updateInsertRecords();
  item.remove();
});

Open in new window


The code works fine, only issue i when ever i am trying to delete, it always delete a wrong row

when I click on the "x" to the right to remove a line element it removed the incorrect element. See print screens. I try to remove row 2 element b but it removes row 3 element c.
jQueryJavaScriptJScript

Avatar of undefined
Last Comment
Brian Tao

8/22/2022 - Mon
Julian Hansen

1. No screen grabs attached
2. Based on your earlier question https://www.experts-exchange.com/questions/28708635/JavaScript-issue-with-comma-separated-values.html?anchorAnswerId=40948619#a40948619 your code does not match what was posted - line 15 should be removed from the source you posted
3. Please have a look at the sample that demonstrates how this code works - let me know if that code is also deleting the wrong row - I have tested it again and it seems to work correctly.
Coast Line

ASKER
sample is giving me http 404 error
ASKER CERTIFIED SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Brian Tao

Your code inserts elements starting from cnt=2.  I guess that's why.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23