Question

我有一个这样的模式：

<section>
    <div data-id="39"></div>
    <div data-id="31"></div>
    <div data-id="57"></div>
    <div data-id="10"></div>
    <div data-id="27"></div>
    <div data-id="5"></div>
    <div data-id="89"></div>
</section>

其中包含一些通过AJAX实时更新的数据。有时，可能会从服务器接收到一个数据，该数据在本节中使用与另一个ID相同的ID进行更新，并且由于它是相同的ID，因此我需要删除旧数据以避免出现多个数据，而仅保留更新的数据。 / p>

例如，我收到data-id 27的更新，并在顶部插入：

<section>
    <div data-id="27"></div>
    <div data-id="39"></div>
    <div data-id="31"></div>
    <div data-id="57"></div>
    <div data-id="10"></div>
    <div data-id="27"></div>
    <div data-id="5"></div>
    <div data-id="89"></div>
</section>

插入后，如何检查该部分中是否已有27个（最后一次迭代），将其从该部分中删除？基本上删除所有具有相同ID的数据，并仅将其保留在顶部。

Answer 1

目前还没有很大的启发，但是随着您向我们提供的大量信息，我用jquery制作了这个示例。如果需要的话，也可以使用普通的JavaScript来完成

$('div').each(function() {
  dataId = $(this).data('id');
  otherDataId = $(this).siblings().data('id');
  if (otherDataId === dataId) {
  	$(this).hide()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
    <div data-id="27">27</div>
    <div data-id="39">1</div>
    <div data-id="31">2</div>
    <div data-id="57">3</div>
    <div data-id="10">4</div>
    <div data-id="27">27</div>
    <div data-id="5">5</div>
    <div data-id="89">6</div>
</section>

Answer 2

您还可以尝试创建一个函数来删除具有特定data-id值的元素，如下所示：

const removeItems = (number) => {
    let elements = document.querySelectorAll(`div[data-id="${number}"]`);
    elements.forEach((e) => { e.remove() });
};

然后使用data-id=27删除元素，您可以执行：removeItems(27);。

看看：

const removeItems = (number) => {
    let elements = document.querySelectorAll(`div[data-id="${number}"]`);
    elements.forEach((e) => { e.remove() });
};
removeItems(27);

<section>
    <div data-id="27">27</div>
    <div data-id="39">39</div>
    <div data-id="31">31</div>
    <div data-id="57">57</div>
    <div data-id="10">10</div>
    <div data-id="27">27</div>
    <div data-id="5">5</div>
    <div data-id="89">89</div>
</section>

Answer 3

document.querySelector(`[data-id=${myDataId}]`).remove();

删除具有相同数据ID的元素

3 个答案: