How to remove all element with same id except one?

时间:2018-03-08 22:13:54

标签: javascript jquery

Let say there's 3 times the same ID, I want to delete all of them except one. Example :

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

Can it be done with a for loop ? Thanks in advance !

6 个答案:

答案 0 :(得分:1)

假设重复项遵循原始版本,则以下代码执行此操作

function pasteHtmlAtCaret(html) {
var sel, range;
if (window.getSelection) {
    // IE9 and non-IE
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
        range.deleteContents();

        // Range.createContextualFragment() would be useful here but is
        // non-standard and not supported in all browsers (IE9, for one)
        var el = document.createElement("div");
        el.innerHTML = html;
        var frag = document.createDocumentFragment(), node, lastNode;
        while ( (node = el.firstChild) ) {
            lastNode = frag.appendChild(node);
        }
        range.insertNode(frag);

        // Preserve the selection
        if (lastNode) {
            range = range.cloneRange();
            range.setStartAfter(lastNode);
            range.collapse(true);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
} else if (document.selection && document.selection.type != "Control") {
    // IE < 9
    document.selection.createRange().pasteHTML(html);
}
}

我创建了一个fiddle

但正如其他人提到的那样,你已经打破了html,如果你可以改变$('#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'); } }); 来说id,你就可以解决这个问题。

答案 1 :(得分:0)

哦哦

您永远不应该拥有相同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;
    }
}

答案 2 :(得分:0)

id属性指定HTML元素的唯一ID(该值必须在HTML文档中唯一)。

id属性最常用于指向样式表中的样式,并通过JavaScript(通过HTML DOM)来操作具有特定id的元素。

mycoolattribute="my little brother"

您可以使用不同的属性,例如:)甚至您自己的属性document.querySelectorAll('#myid') 来定位多个元素,但请记住不要使用多个IDS ! {{1}}

修改:您可以使用查询选择器(jQuery)来捕获名为“ID”的属性,但我真的更愿意避免这种做法:

{{1}}

我确信仔细查看docs是个好主意!

答案 3 :(得分:0)

我为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 :(得分:0)

您可以根据公共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- *属性标记它们可能是有益的,这样可以用较少的指令对删除进行编码。

&#13;
&#13;
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);
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 5 :(得分:-2)

使用:not和:这样的css的第一个伪类

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