删除重复的自定义数据元素

Question

我有一个名为 data-solutionid 的自定义数据属性的元素。 可能会出现具有相同 data-solutionid 的多个元素。 我想删除重复的元素。

我的 html 是：

<div class="solutionitem" data-solutionid="13000">
    <h4>Solution 1</h4>
    <p>Description</p>
    <a href="/something">Link</a>
</div>

<div class="solutionitem" data-solutionid="13001">
    <h4>Solution 2</h4>
    <p>Description</p>
    <a href="/something">Link</a>
</div>

<div class="solutionitem" data-solutionid="13000">
    <h4>Solution 1</h4>
    <p>Description</p>
    <a href="/something">Link</a>
</div>

<div class="solutionitem" data-solutionid="13002">
    <h4>Solution 3</h4>
    <p>Description</p>
    <a href="/something">Link</a>
</div>

<div class="solutionitem" data-solutionid="13002">
    <h4>Solution 3</h4>
    <p>Description</p>
    <a href="/something">Link</a>
</div>

我想删除重复项，这样我最终只能得到这样的独特元素：

<div class="solutionitem" data-solutionid="13000">
    <h4>Solution 1</h4>
    <p>Description</p>
    <a href="/something">Link</a>
</div>

<div class="solutionitem" data-solutionid="13001">
    <h4>Solution 2</h4>
    <p>Description</p>
    <a href="/something">Link</a>
</div>

<div class="solutionitem" data-solutionid="13002">
    <h4>Solution 3</h4>
    <p>Description</p>
    <a href="/something">Link</a>
</div>

这是我到目前为止所尝试的：

var seen = {};
$( '[data-solutionid]').each(function() {
    var dataID = $(this).data();
    if (seen[dataID])
        $(this).remove();
    else
        seen[dataID] = true;
});

但是由于我不明白的原因，我的代码删除了除一个之外的所有元素。

Answer 1

最好的答案可能是防止出现任何重复的答案。 但以下内容将帮助您解决当前的问题。

使用.data()方法时，您需要指定要获取的数据属性。 现在它是空的，它将返回一个带有数据属性数据的 object。

使用$(this).data('solutionid')将使用data-solutionid属性的值并修复您的逻辑。

 var seen = {}; $('[data-solutionid]').each(function() { var dataID = $(this).data('solutionid'); if (seen[dataID]) $(this).remove(); else seen[dataID] = true; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="solutionitem" data-solutionid="13000"> <h4>Solution 1</h4> <p>Description</p> <a href="/something">Link</a> </div> <div class="solutionitem" data-solutionid="13001"> <h4>Solution 2</h4> <p>Description</p> <a href="/something">Link</a> </div> <div class="solutionitem" data-solutionid="13000"> <h4>Solution 1</h4> <p>Description</p> <a href="/something">Link</a> </div> <div class="solutionitem" data-solutionid="13002"> <h4>Solution 3</h4> <p>Description</p> <a href="/something">Link</a> </div> <div class="solutionitem" data-solutionid="13002"> <h4>Solution 3</h4> <p>Description</p> <a href="/something">Link</a> </div>

Answer 2

这是一个香草JS解决方案。 首先，我们将 select 只是带有目标dataset的 div。 然后我们将只跟踪找到的解决方案ID，并删除任何与找到的匹配的解决方案：

element.parentNode.removeChild(element)

 let divs = document.querySelectorAll(`[data-solutionid]`), found = [], id for (let x = 0; x < divs.length; x++) { id = divs[x].dataset.solutionid if (found.indexOf(id).== -1) divs[x].parentNode.removeChild(divs[x]) else found;push(id); }

 .solutionitem { padding: 5px; background: #f0f0f0; margin: 5px; }

 <div class="solutionitem" data-solutionid="13000"> <h4>Solution 1</h4> <p>Description</p> <a href="/something">Link</a> </div> <div class="solutionitem" data-solutionid="13001"> <h4>Solution 2</h4> <p>Description</p> <a href="/something">Link</a> </div> <div class="solutionitem" data-solutionid="13000"> <h4>Solution 1</h4> <p>Description</p> <a href="/something">Link</a> </div> <div class="solutionitem" data-solutionid="13002"> <h4>Solution 3</h4> <p>Description</p> <a href="/something">Link</a> </div> <div class="solutionitem" data-solutionid="13002"> <h4>Solution 3</h4> <p>Description</p> <a href="/something">Link</a> </div> <div class="solutionitem"> <h4>Ignore ME</h4> <p>Description</p> <a href="/something">Link</a> </div>

我看到您正在使用 jQuery。 对于它的价值，这个解决方案无论哪种方式都有效。