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);