如何删除除一个之外具有相同id的所有元素? [复制]
Posted
技术标签:
【中文标题】如何删除除一个之外具有相同id的所有元素? [复制]【英文标题】:How to remove all element with same id except one? [duplicate] 【发布时间】:2018-08-17 09:53:30 【问题描述】:假设有 3 次相同的 ID,我想删除除一个以外的所有 ID。 示例:
<div id = "parent_id">
<div id = "id_1">
<div id = "id_1-1"> </div>
<div id = "id_1-1"> </div> // I want to delete this
<div id = "id_1-1"> </div> // I want to delete this
<div id = "id_1-2"> </div>
<div id = "id_1-2"> </div> // I want to delete this
<div id = "id_1-2"> </div> // I want to delete this
</div>
<div id = "id_2">
<div id = "id_2-1"> </div>
<div id = "id_2-1"> </div> // I want to delete this
<div id = "id_2-1"> </div> // I want to delete this
<div id = "id_2-2"> </div>
<div id = "id_2-2"> </div> // I want to delete this
<div id = "id_2-2"> </div> // I want to delete this
</div>
<div id = "id_3">
<div id = "id_3-1"> </div>
<div id = "id_3-1"> </div> // I want to delete this
<div id = "id_3-1"> </div> // I want to delete this
<div id = "id_3-2"> </div>
<div id = "id_3-2"> </div> // I want to delete this
<div id = "id_3-2"> </div> // I want to delete this
</div>
</div>
可以用 for 循环来完成吗? 提前致谢!
【问题讨论】:
标记周期错误! 这首先不应该发生。元素 ID 应唯一。 Id 应该是唯一的。您的 html 标记错误。 在某些浏览器上可能是可行的。但是,正如其他人在这里指出的那样,拥有多个具有相同 id 的元素是非法的,因此浏览器的行为不会标准化,并且代码可能随时中断。 注意:document.querySelectorAll('#id_1-1')
(和 jQueery 等价物)将返回所有这些元素 - 但它仍然是不好的做法并且在技术上无效标记
【参考方案1】:
您可以根据公共 id 选择所有元素,
var list = jQuery('[id^=id_]');
如果它们匹配更具体的版本,即id_1-1
,并且不是您指定的特定索引,则进一步过滤它们。
list = list.filter((idx,element)=>
//getElementIndex is a custom util function to get element's index
let indexInParent = getElementIndex(element);
//Check if the element has the specific id format, and is not an element
//at the indexes to keep
return element.id.match(/id_\d-\d/) && ![0,3].includes(indexInParent);
);
如果需要不同的标准来删除或不删除什么,您只需修改filter()
方法逻辑以适应。
然后删除它们。
list.remove();
请注意,您不应多次使用相同的 id。如果这些 id 包含某种信息,则该信息应存储在 data-* attributes 中。如果所有被移除的元素都有一些共同点,那么使用公共类或 data-* 属性标记它们可能会有所帮助,这样可以用更少的指令对移除进行编码。
jQuery('[id^=id_]').filter((idx,element)=>
let indexInParent = getElementIndex(element);
return element.id.match(/id_\d-\d/) && ![0,3].includes(indexInParent);
).remove();
function getElementIndex (element)
return Array.from(element.parentNode.children)
.indexOf(element);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "parent_id">
<div id = "id_1">
<div id = "id_1-1">a </div>
<div id = "id_1-1">b </div>
<div id = "id_1-1">c </div>
<div id = "id_1-2">d </div>
<div id = "id_1-2">e </div>
<div id = "id_1-2">f </div>
</div>
<div id = "id_2">
<div id = "id_2-1">g </div>
<div id = "id_2-1">h </div>
<div id = "id_2-1">i </div>
<div id = "id_2-2">j </div>
<div id = "id_2-2">k </div>
<div id = "id_2-2">l </div>
</div>
<div id = "id_3">
<div id = "id_3-1">m </div>
<div id = "id_3-1">n </div>
<div id = "id_3-1">o </div>
<div id = "id_3-2">p </div>
<div id = "id_3-2">q </div>
<div id = "id_3-2">r </div>
</div>
</div>
【讨论】:
【参考方案2】:假设副本遵循原始,下面的代码就可以了
$('#parent_id').children('div').each(function(i, div)
var $first = $(div).children('div').first();
var $next = $first.next('div');
while($next.length > 0)
if ($next.attr('id') === $first.attr('id'))
$next.remove();
else $first = $next;
$next = $first.next('div');
);
我创建了一个fiddle。
但是正如其他人提到的,你已经破坏了 html,如果你可以将 id
更改为 data-position
,你会解决这个问题。
【讨论】:
【参考方案3】:我这样做是为了在 jquery 上出现意外情况,你的 id 是正确的,因为它们是唯一的,但是对于为这个文件制作 css 的人来说这很丑,我认为它被称为 BEM...
这是我的例子:
$('#parent_id').children('div').each(function(i)
let removed = $('#id_' + (++i)).children('div').each(function()
$(this).remove();
);
//Think the algorithm..
$(this).append($(removed[0]).html());
$(this).append($(removed[3]).html());
);
https://jsfiddle.net/SirXploSiv/vtrL9p54/27/
【讨论】:
【参考方案4】:id 属性为 HTML 元素指定一个唯一的 id(该值在 HTML 文档中必须是唯一的)。
id 属性最常用于指向样式表中的样式,并通过 javascript(通过 HTML DOM)来操作具有特定 id 的元素。
<element id="id">
您可以使用不同的属性,例如 class="yourname"
甚至您自己的属性 mycoolattribute="my little brother"
来定位多个元素但请记住不要使用多个 IDS! :)
编辑:您可以使用 查询选择器 (jQuery) 来捕获名为“ID”的属性,但我更愿意避免这种做法:
document.querySelectorAll('#myid')
我确信仔细查看docs 是个好主意!
【讨论】:
【参考方案5】:哦哦
您永远不应该拥有具有相同 ID 的元素。你永远不应该拥有具有相同 ID 的元素。当您拥有具有相同 ID 的元素时,浏览器会做一些奇怪的事情(您永远不应该这样做)。
您的问题没有实际的答案,因为如果您的元素具有相同的 ID,那么一切都会被严重破坏。当存在具有相同 ID 的元素时尝试操作 DOM 只会导致挫败感和梦想破灭。如果您遇到了具有相同 ID 的元素的情况,那么您已经输了。
更有帮助的答案: 您也许可以做到,但不能保证。此时,任何 DOM 操作很可能是未定义的行为。在 Firefox 上,我成功构建了一个 id 列表并删除了任何重复项,如下所示:
var elements = document.querySelectorAll("*[id]");
var usedIds = ;
for(let i = 0; i < elements.length; i++)
const id = elements[i].getAttribute("id");
if(usedIds[id])
elements[i].parentNode.removeChild(elements[i]);
else
usedIds[id] = true;
【讨论】:
一切都会被严重破坏 - 不,也许你的录像机会被重新编程,也许你的狗会跑掉,但页面会呈现:p【参考方案6】:像这样使用 :not 和 :first 的 css 伪类
$("parent_id").children("div").find("div:not(:first)")).remove();
【讨论】:
以上是关于如何删除除一个之外具有相同id的所有元素? [复制]的主要内容,如果未能解决你的问题,请参考以下文章
如何从数组中删除除javascript中的第一个元素之外的所有元素