I have a function to remove a field in my form that works in Firefox but not in Chrome.

function activeDelete(del) {
    $('[data-delete="' + del + '"]').click(function(event) {
        deleteField(event);
    });
}

function deleteField(event) {
    if ((members - 1) >= 3) {
        members -= 1;
        var i = $(event.target).data('delete');
        console.log(i)
        var currentdiv = $('[data-div="' + i + '"]');
        currentdiv.remove();
        $("#rollWheel").val("Roll the wheel ! (" + members + " members)");
    } else {
        $('.errors').remove();
        $('#firstCard').append('<div class="errors animated fadeOut">3 participants minimum.</div>');
    }


  }

activeDelete(1);

I logged my i variable and it is undefined (in Chrome). I tested locally and also on my website.

What is it I'm missing here?

I have a function to remove a field in my form that works in Firefox but not in Chrome.

function activeDelete(del) {
    $('[data-delete="' + del + '"]').click(function(event) {
        deleteField(event);
    });
}

function deleteField(event) {
    if ((members - 1) >= 3) {
        members -= 1;
        var i = $(event.target).data('delete');
        console.log(i)
        var currentdiv = $('[data-div="' + i + '"]');
        currentdiv.remove();
        $("#rollWheel").val("Roll the wheel ! (" + members + " members)");
    } else {
        $('.errors').remove();
        $('#firstCard').append('<div class="errors animated fadeOut">3 participants minimum.</div>');
    }


  }

activeDelete(1);

I logged my i variable and it is undefined (in Chrome). I tested locally and also on my website.

What is it I'm missing here?

• javascript
• jquery
• google-chrome

Share Improve this question Follow edited Feb 15, 2016 at 8:57 Aod Ren asked Feb 15, 2016 at 8:47 Aod RenAod Ren 67911 gold badge99 silver badges1919 bronze badges 7

• What is your markup? And for what element this event handler was bound? – Rajaprabhu Aravindasamy Commented Feb 15, 2016 at 8:48
• Where is the code where you call this function? – Rory McCrossan Commented Feb 15, 2016 at 8:48
• who is deleteField called – Arun P Johny Commented Feb 15, 2016 at 8:49
• 1 Can you check, what does $(event.target) return ? Does it, grab the correct event and its target. – Jeremy Rajan Commented Feb 15, 2016 at 9:01
• 2 Thanks @JeremyRajan, the target was mislead. Didn't know about the currentTarget. This munity is awesome. – Aod Ren Commented Feb 15, 2016 at 9:10

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 6

You should use currentTarget here instead of target, but I remend to you to use $(this).

The minimum change:

  $(event.currentTarget).data('delete');

The remended change:

function activeDelete(del) {
  $('[data-delete="' + del + '"]').click(function(event) {
    deleteField($(this)); // see here the parameter
    event.preventDefault();
  });
}

function deleteField(obj) {
  if ((members - 1) >= 3) {
    members -= 1;
    var i = obj.data('delete'); // see here the getter
    console.log(i)
    var currentdiv = $('[data-div="' + i + '"]');
    currentdiv.remove();
    $("#rollWheel").val("Roll the wheel ! (" + members + " members)");
  } else {
    $('.errors').remove();
    $('#firstCard').append('<div class="errors animated fadeOut">3 participants minimum.</div>');
  }


}

activeDelete(1);

Change your following line from $(event.target) to $(event.currentTarget). This is because the click event might have triggered on the child elements.

According to the doc:

Identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which identifies the element on which the event occurred.

Or you can also change your line to $(event.target).closest("[data-delete]").