Question

This is driving me insane. I am trying to select a DOM element by ID in jQuery and remove it. Despite my best efforts, jQuery keeps giving me Uncaught Error: Syntax error, unrecognized expression: #li-/media/photos/KObtu.jpg

But this id definitely does exist in my DOM. So I decided to cut jQuery out of the picture and use plain ol’ javascript. This worked beautifully, but I have no idea why.

function DeletePhoto() {
    //Remove a photo from the server when the delete button is clicked
    $("#personal-photo-list .delete").click( function() {
        var photoId = $(this).attr("id").split("-")[1];
        $.post("profile/DeletePhoto/", { "photo": photoId }, function(jsonObject){
            $("#li-" + photoId).remove(); //What I actually want to call. Does not work
            $("#li-/media/photos/KObtu.jpg").remove(); //I thought maybe using a variable was throwing things off.  This does not work either
            document.getElementById("li-/media/photos/KObtu.jpg").innerHTML="dsfsdfsdfsdf"; //The exact same id as the statements above. This command successfully replaces the text in the <li> tag
    });
});

}

In case anyone is curious, here is a snippet of the HTML:

<li id="li-/media/photos/KObtu.jpg">
                <img src="/media/photos/KObtu.jpg"> 
                <p> Uploaded on Sept. 23, 2012 | <a href="javascript:void(0)" id="a-/media/photos/KObtu.jpg" class="delete"> Delete </a> </p>
</li>

Thank you so much in advance.

Answer 1

From the documentation:

If you wish to use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[\]^`{|}~ ) as a literal part of a name, you must escape the character with two backslashes: \\.

/ is a meta-character, so you have to escape it.