Object doesn't support property or method 'closest'

Question

I just got the info that my jQuery function is not working on IE nor Edge. In the console I have the message:

Object doesn't support property or method 'closest'

This is the jQuery:

$('body').on('change', 'select', function (event) {
    if(event.target.id.indexOf("couche") >= 0) {
        $.ajax({
            url: "{{ redir2 }}",
            type: "POST",
            data: {
                ident: event.target.id,
                value: event.target.value,
                iscouche: "True"
            },
        }).done(function (msg) {
            if(msg.nothing == 1) {
                var what = event.target.closest('tbody');
                $(what).find("tr:gt(0)").remove();
            } else {
                var add = event.target.closest('tr');
                var toremove = msg.toremove.split(" ");
                for(var i = 0; i < toremove.length; i++) {
                    if(toremove[i].length > 0) {
                        jQuery(toremove[i]).remove();
                    }
                }
                jQuery(add).after(msg.ret);
            }
        });

    } else {
        $.ajax({
            url: "{{ redir2 }}",
            type: "POST",
            data: {
                ident: event.target.id,
                value: event.target.value,
                iscouche: "False"
            },
        }).done(function (msg) {});
    }
});

Can someone tell me if there's a fix for that?

Answer 1

event.target is a DOM node, not a jQuery object so has no jQuery methods

In jQuery instead use $(this) which is a jQuery object.

I also suggest you don't use the target if you do not need to.

UPDATE: the newer browsers now has the DOM method closest, so OPs code would work in newer browsers except IE.

Here is a fixed jQuery version:

$('body').on('change', 'select', function(event) {
  var $sel = $(this),    // the changed select
    id = this.id,        // or $(this).attr("id"); 
    val = $(this).val(); // or this.value
  if (id.indexOf("couche") >= 0) {
    $.ajax({
      url: "{{ redir2 }}",
      type: "POST",
      data: {
        ident: id,
        value: val,
        iscouche: "True"
      },
    }).done(function(msg) {
      if (msg.nothing == 1) {
        var what = $sel.closest('tbody')
        $(what).find("tr:gt(0)").remove();
      } else {
        var add = $sel.closest('tr');
        var toremove = msg.toremove.split(" ")
        for (var i = 0; i < toremove.length; i++) {
          if (toremove[i].length > 0) {
            jQuery(toremove[i]).remove();
          }
        }
        jQuery(add).after(msg.ret);
      }
    });

  } else {
    $.ajax({
      url: "{{ redir2 }}",
      type: "POST",
      data: {
        ident: id,
        value: val;,
        iscouche: "False"
      },
    }).done(function(msg) {});
  }
});

or neater:

$('body').on('change', 'select', function(event) {
  var $sel = $(this), // the select changed
    val = this.value,
    id = this.id,
    isCouche = id.indexOf("couche") != -1;
  $.ajax({
    url: "{{ redir2 }}",
    type: "POST",
    data: {
      ident: id,
      value: val,
      iscouche: isCouche ? "True" : "False";
    },
  }).done(function(msg) {
    if (isCouche) {
      if (msg.nothing == 1) {
        var what = $sel.closest('tbody')
        $(what).find("tr:gt(0)").remove();
      } else {
        var add = $sel.closest('tr');
        var toremove = msg.toremove.split(" ")
        for (var i = 0; i < toremove.length; i++) {
          if (toremove[i].length > 0) {
            $(toremove[i]).remove();
          }
        }
        $(add).after(msg.ret);
      }
    } else {
      // handle not couche
    }
  });
});

Answer 2

closest() is defined on jQuery prototype, it cannot be used on plain JavaScript object.

event.target is the DOM element on which the event has occurred, to use jQuery methods on it, the element need to be wrapped in the jQuery.

Change

var what = event.target.closest('tbody')

to

var what = $(event.target).closest('tbody')

Answer 3

Yuo must inclose it in $() as event.target is not a jQuery element

   $(event.target).closest('tr')