jQuery remove table row with non-standard id characters

Question

I am trying to remove a table row using jQuery like this

function removeTableRow(trId){
    $('#' + trId).remove();
}

However this doesn't work if the id contains a character like "%", "^", "&", ",", etc....

Do you know if there is any work around for this?

Answer 1

I believe the reason why can be found here: What are valid values for the id attribute in HTML?

However I'm not so sure about a workaround other than the obvious (change your ids)

Answer 2

HTML 4.0 IDs cannot contain these characters and be valid at the same time:

Attribute values of type ID and NAME must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). These values are case-sensitive.

If you must, you can try this:

function removeTableRow(trId) {
    $(document.getElementById(trId)).remove();
}

I'd recommend fixing the HTML, though.

Answer 3

I wouldn't suggest using those characters in an id string. However if you feel it necessary then you need to use \\ to escape the character in the selector.

Example: http://jsfiddle.net/NuWSp/

<table>
    <tr id="b%b">
        <td>hello</td>
    </tr>
    <tr>
        <td>world</td>
    </tr>
</table>


function removeTableRow(trId){
    $('#' + trId).remove();
}

removeTableRow( "b\\%b" );

Answer 4

It's better if it is several rows in many tables to remove them through another attribute such as class or group.

Here is an example of how to remove via group attribute:

$("table tr[group='"+groupname+"']").remove();

I hope this helps.

Answer 5

I'm not sure if it will work, but you can try it

var id = "id%#&hh";
$("tr").each(function(){
    if($(this).attr("id") == id){
        $(this).remove();
        return;
    }
});