如何删除除一个之外具有相同id的所有元素？ [复制]

Question

假设有 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 循环来完成吗？ 提前致谢！

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

Answer 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，你会解决这个问题。

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

Answer 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 是个好主意！

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

Answer 6

像这样使用 :not 和 :first 的 css 伪类

$("parent_id").children("div").find("div:not(:first)")).remove();