jquerygoogle-chromefirefoxelement

jQuery find a li element within ul

I've a function, which should remove a li element from a list identified by the id. I use jQuery and this call

$("#selector").find("li[id='" + id.substring(4) + "']").remove();

The call started with a click on a button. In Firefox it works without problems ... in Chrome not.

Has anyone an idea why?

Solution

  • The issue might be due to differences in how Chrome and Firefox handle certain JavaScript/jQuery functionalities. Try the following:

    1 : Ensure id.substring(4) returns the correct value. Use console.log(id.substring(4)) to verify.

    2: Escape special characters in the ID:

    var safeId = id.substring(4).replace(/([!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~])/g, "\\$1");
$("#selector").find("li[id='" + safeId + "']").remove();

    3 : Wrap the removal code in a setTimeout to handle reflow issues:

    setTimeout(function()
 {`enter code here`
    $("#selector").find("li[id='" + safeId + "']").remove();
}, 0);