且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

删除id =“.xxx”的div或span

更新时间:2023-12-05 11:15:04

替代方法



我认为你可以做任何id。依靠文档结构来提供信息。看起来你有一个div列表,其中每个div可以通过点击 x 删除,它是存在于div。

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

这应该可以让你不必依赖id,只要你坚持将span放入div中并分配适当的类名的基本结构。如果您想知道被点击元素的父元素的ID,请将其存储为数据属性,而不是ID。这保持jQuery和旧的浏览器快乐。例如,

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>

可以在span click处理程序中检索,如下所示:

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






旧方法



使用本地 getElementById 方法查询,以确保如果用户代理认为是有效的ID,则选择该元素。 jQuery将对传入的ID做一些额外的处理,所以***是本机查询:


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

或转义字符 * c $ c>。与 \\ 。这里有一个jQuery-esque解决方案

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

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

适用于所有moojor浏览器。请进行IE测试自己:) 查看此示例

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

请注意,根据HTML5,构成有效ID字符串的限制是:

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


  1. 必须是唯一的

  2. 必须至少包含一个字符

  3. 不能包含任何空格字符

>从规范中引用:


id属性指定其元素的唯一标识符(ID)。该值必须在元素的主子表中的所有ID中唯一,且必须至少包含一个字符值不能包含任何空格字符

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.

如果值不是空字符串,用户代理必须将元素与给定值关联(例如对于CSS中的选择器或对于DOM中的 getElementById()方法),为了在元素的归属子树中进行ID匹配的目的(确切地说,包括任何空格字符)。

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