Delete a div or span with a id=".xxx"

Question

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

// HTML

<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">
                x
            </span>
            <? echo $w1; ?>
        </div>
    <? } while ($row_ws1=m ysql_fetch_assoc($ws1)); ?>
</div>

Thanks Jean

Answer 1

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

Answer 2

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

Answer 3

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 (".").

Answer 4

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>
<div class="node">
    <span class="delete"> x </span>
    ..
</div>

Assign the delete event to all spans as,

$("span.delete").click(function() {
    $(this).parent('.node').remove();
});

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.">
    ...
</div>

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:

$(document.getElementById("*xxx.")).remove();
$(document.getElementById(".xxx*")).remove();

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

$("#\\*xxx\\.").remove();
$("#\\.xxx\\*").remove();

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

Answer 5

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

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

x.each 
(
    function () 
    {
        var y = $(this);

        if ( /[\.\*]/.test (y.attr ('id') ) )
            y.remove ();
    } 
);

Answer 6

In pure javascript, you can use :

var tmp = document.getElementById('xyz');
tmp.parentNode.removeChild(tmp);

Answer 7

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

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

Or even better, this:

$("#\\*xxx\\.").remove();
$("#\\.xxx\\*").remove();

Answer 8

There’s a tool for that: http://mothereffingcssescapes.com/#*xxx.

HTML:

<p id="*xxx.">foo bar</p>

CSS:

<style>
  #\*xxx\. {
    background: hotpink;
  }
</style>

JavaScript:

<script>
  // document.getElementById or similar
  document.getElementById('*xxx.');
  // document.querySelector, jQuery or similar
  $('#\\*xxx\\.');
</script>