Usage of javascript `this.closest` in IE11 and Chrome [duplicate]

Question

In IE11 the below code shows the following error, But it is working in Chrome

Object doesn't support property or method 'closest'4:31 PM 09/07/16

assetTable.on("click", "td.clickProgress", function onDataTableRowClicked(event) {
  var tr = this.closest("tr");
  var assetId = tr.id.replace("asset_", "");
  LoadDialog(assetId);
}

However, when I change it to $(this) it is working in both IE and Chrome

assetTable.on("click", "td.clickProgress", function onDataTableRowClicked(event) {
  var tr = $(this).closest("tr");
  var assetId = tr.attr('id').replace("asset_", "");
  LoadDialog(assetId);
}

Any reason behind this compatibility issue between browsers?

Answer 1

Check out MDN's compatibility table for element.closest. Per the link:

This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

element.closest is an experimental technology not supported on IE. In this case you use JavaScript's this, unmodified. The reason why $(this).closest works is because you are wrapping this into a jQuery object, making it use jQuery's closest function.