Удалить div или span с идентификатором = ". Xxx"

Question

Я не могу удалить div с идентификатором с точкой или звездочкой.

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

У меня есть код jquery, который удаляет <div id="xxx"></div>, но не выше. Не ищите код jQuery, но нужен ли ему слеш?

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

Спасибо Jean

Answer 1

Идентификаторы не могут начинаться с точки и не могут содержать звездочку. Для получения дополнительной информации прочитайте этот ответ от dgvid .

Answer 2

$("[id='*xxx.']").remove(); или просто напишите правильные идентификаторы .

Answer 3

Жетоны ID и NAME должны начинаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифр ([0-9]), дефисов ("-"), подчеркиваний (" _ "), двоеточия (": ") и точки (". ").

Answer 4

Глобальный метод, если вы не знаете, что такое «xxx».

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

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

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

Answer 5

Альтернативный подход

Я думаю, что вы можете обойтись без возни с какими-либо идентификаторами вообще.Положитесь на структуру документа, чтобы предоставить информацию.Похоже, у вас есть список div, где каждый div можно удалить, нажав на x, который присутствует внутри div.

Так что, если у вас была такая структура:

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

Назначьте событие удаления для всех промежутков, как,

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

Это избавит вас от необходимости полагаться на идентификатор вообще, если вы придерживаетесь базовой структуры размещения промежутка внутриразделить и назначить соответствующие имена классов.Если вы хотите узнать идентификатор родительского элемента, по которому щелкнули, сохраните его как атрибут данных вместо идентификатора.Это делает jQuery и старые браузеры счастливыми.Например,

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

, который можно получить из обработчика щелчков, как:

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

Старый подход

Запрос с использованием собственного метода getElementById, чтобы убедиться, что элемент выбран, если пользовательский агент считает это действительным идентификатором.jQuery выполнит некоторую дополнительную обработку переданного идентификатора, так что лучше сделать запрос самостоятельно:

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

или экранировать символы * и . с помощью \\.Вот решение jQuery-esque

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

Работает на всех моих браузерах.Проводите ли IE тесты самостоятельно :) См. Этот пример .

Обратите внимание, что ограничения для того, что составляет действительную строку идентификатора в соответствии с HTML5:

1. Должно бытьуникальный
2. должен содержать хотя бы один символ
3. не должен содержать пробелов

Цитирование из spec :

Атрибут id указывает уникальный идентификатор (ID) своего элемента.Значение должно быть уникальным среди всех идентификаторов в домашнем поддереве элемента, а должно содержать хотя бы один символ .Значение не должно содержать пробелов .

Если значение не является пустой строкой, пользовательские агенты должны связать элемент с данным значением (точно, включая любые пробелы) дляв целях сопоставления идентификаторов в домашнем поддереве элемента (например, для селекторов в CSS или для метода getElementById () в DOM).

Answer 6

В чистом JavaScript вы можете использовать:

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

Answer 7

Для этого есть инструмент: 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>

Answer 8

Решение Бабикера работает.В качестве альтернативы вы можете сделать это:

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

Или даже лучше, это:

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