I am unable to delete a div with an id with a period or an asterix.

<div id="*xxx."></div>
<div id=".xxx*"></div>

I have the jquery code, which deletes the <div id="xxx"></div> but not the above. Not looking for the jQuery code, but does it need a forward slash?

----req by anurag--------

// JavaScript

$('.s').click(function (e) {
    var wd_del = (e.target.id);
    var yy = wd_del.substr(1, 100);

    $(document.getElementById("" + yy)).remove();
    $(document.getElementById("s" + yy)).remove();


<div id="s_t">
    <? do { $w1=$ row_ws1[ 'wd']; ?>
        <div id="<? echo $w1 ?>" class="ul_shh" style="cursor:pointer;">
            <span id="s<? echo $w1 ?>" class="s">
            <? echo $w1; ?>
    <? } while ($row_ws1=m ysql_fetch_assoc($ws1)); ?>

Thanks Jean

+7  A: 

IDs can't start with a dot and can't contain an asterisk. For more information read this answer from dgvid.

Gert G
True, but still I need to remove such ids
+3  A: 

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

+5  A: 

$("[id='*xxx.']").remove(); or just write proper identifiers.

I know id.remove(), but I cam not able to do it when a period or a asterix comes in
+1 that's a clean approach and it works!
+2  A: 

Alternate Approach

I think you can do without messing around with any id's at all. Rely on the document structure instead to provide the information. It looks like you have a list of divs, where each div can be deleted by clicking on an x that is present inside the div.

So if you had a structure like:

<div class="node">
    <span class="delete"> x </span>
<div class="node">
    <span class="delete"> x </span>

Assign the delete event to all spans as,

$("span.delete").click(function() {

That should free you from having to rely on the id at all, as long as you stick to a basic structure of putting the span inside the div and assign appropriate class names. If you want to know the ID of the clicked element's parent, store it as a data attribute instead of an id. That keeps jQuery and older browsers happy. For example,

<div class="node" data-id="*xxx.">

which can be retrieved inside the span click handler, as:

$("span.delete").click(function() {
    var node = $(this).parent('.node');
    var id = node.attr('data-id'); // do something with it

Old Approach

Query using the native getElementById method to ensure that the element gets selected if the user-agent considers that to be a valid ID. jQuery will do some extra processing on the passed in ID, so it's better to query natively:


Or escape the characters * and . with \\. Here's a jQuery-esque solution


Works on all moojor browsers for me. Do IE tests yourself :) See this example.

Note, that the restrictions for what constitutes a valid ID string as per HTML5 are:

  1. Must be unique
  2. Must contain at least one character
  3. Must not contain any space character

Quoting from the spec:

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

If the value is not the empty string, user agents must associate the element with the given value (exactly, including any space characters) for the purposes of ID matching within the element's home subtree (e.g. for selectors in CSS or for the getElementById() method in the DOM).

It works fine, now I have got another issue, it does not delete the next id without page refresh.
Can you post an example online. It's hard to tell without looking at some code.
check the code above

Babiker's solution works. Alternatively you can do this:

$("div").each(function(index, elem) {
 if ($(elem).attr("id") == "*xxx." || $(elem).attr("id") == ".xxx*") {

Or even better, this:

Bytecode Ninja
+1  A: 

Global method if you don't know what "xxx" is.

var x = $("span,div");

    function () 
        var y = $(this);

        if ( /[\.\*]/.test (y.attr ('id') ) )
            y.remove ();
Brock Adams
+1  A: 

In pure javascript, you can use :

var tmp = document.getElementById('xyz');
Fabien Bernede