Link to home
Start Free TrialLog in
Avatar of Coast Line
Coast LineFlag 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.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

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.
Avatar of Coast Line

ASKER

sample is giving me http 404 error
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Your code inserts elements starting from cnt=2.  I guess that's why.