Question

我需要删除重复的HTML元素innerText。我尝试了很多解决方案但没有取得好成绩。我不想使用jQuery;只有纯粹的JS。

如果它可以通过CSS解决，那对我来说更好。我尝试了很多东西。

我的尝试：

1）首先我尝试在追加html之前删除重复的数组值，但它非常复杂，不适合我的经验。

2）我有一个隐藏元素内部文本的意识形态。

3）我尝试使用这种方法来获取faild。

Array.from(elements).forEach( (el) => {
     el.innerText = "foo";
});

我的项目：

1

我的代码：

2

<div id="LastDocuments">
<div class="LastDocument">
    <div class="ldImgDiv"><img class="ldImg" src="./images/ic_sinav.svg"></div>
    <div class="ldTitle">Sınav 13.exam</div>
</div>
<div class="LastDocument">
    <div class="ldImgDiv"><img class="ldImg" src="./images/ic_sinav.svg"></div>
    <div class="ldTitle">Sınav 10.exam</div>
</div>
<div class="LastDocument">
    <div class="ldImgDiv"><img class="ldImg" src="./images/ic_sinav.svg"></div>
    <div class="ldTitle">Sınav 10.exam</div>
</div>
<div class="LastDocument">
    <div class="ldImgDiv"><img class="ldImg" src="./images/ic_sinav.svg"></div>
    <div class="ldTitle">Sınav 10.exam</div>
</div>
<div class="LastDocument">
    <div class="ldImgDiv"><img class="ldImg" src="./images/ic_sinav.svg"></div>
    <div class="ldTitle">Sınav 10.exam</div>
</div>
<div class="LastDocument">
    <div class="ldImgDiv"><img class="ldImg" src="./images/ic_sinav.svg"></div>
    <div class="ldTitle">Sınav 10.exam</div>
</div>
<div class="LastDocument">
    <div class="ldImgDiv"><img class="ldImg" src="./images/ic_sinav.svg"></div>
    <div class="ldTitle">Sınav 13.exam</div>
</div>
<div class="LastDocument">
    <div class="ldImgDiv"><img class="ldImg" src="./images/ic_sinav.svg"></div>
    <div class="ldTitle">Sınav 13.exam</div>
</div>
<div class="LastDocument">
    <div class="ldImgDiv"><img class="ldImg" src="./images/ic_sinav.svg"></div>
    <div class="ldTitle">Sınav 18.exam</div>
</div>

在ansvers下面，我找到了解决方案。感谢

Answer 1

这会将已使用的名称存储在一个数组中，如果出现另一个具有相同名称的项目，它将删除它。

5.12.3

只需使用您的HTML进行测试，效果非常好：）

Answer 2

您可以使用Set来跟踪已找到的文本：

function removeDuplicates() {
    const st = new Set();
    for (const div of document.querySelectorAll('.LastDocument')) {
        if (st.has(div.textContent.trim())) {
            div.parentNode.removeChild(div);
        }
        st.add(div.textContent.trim());
    }
}

function removeDuplicates() {
    const st = new Set();
    for (const div of document.querySelectorAll('.LastDocument')) {
        if (st.has(div.textContent.trim())) {
            div.parentNode.removeChild(div);
        }
        st.add(div.textContent.trim());
    }
}

removeDuplicates();

<div id="LastDocuments">
<div class="LastDocument">
    <div class="ldImgDiv"><img class="ldImg" src="./images/ic_sinav.svg"></div>
    <div class="ldTitle">Sınav 13.exam</div>
</div>
<div class="LastDocument">
    <div class="ldImgDiv"><img class="ldImg" src="./images/ic_sinav.svg"></div>
    <div class="ldTitle">Sınav 10.exam</div>
</div>
<div class="LastDocument">
    <div class="ldImgDiv"><img class="ldImg" src="./images/ic_sinav.svg"></div>
    <div class="ldTitle">Sınav 10.exam</div>
</div>
<div class="LastDocument">
    <div class="ldImgDiv"><img class="ldImg" src="./images/ic_sinav.svg"></div>
    <div class="ldTitle">Sınav 10.exam</div>
</div>
<div class="LastDocument">
    <div class="ldImgDiv"><img class="ldImg" src="./images/ic_sinav.svg"></div>
    <div class="ldTitle">Sınav 10.exam</div>
</div>
<div class="LastDocument">
    <div class="ldImgDiv"><img class="ldImg" src="./images/ic_sinav.svg"></div>
    <div class="ldTitle">Sınav 10.exam</div>
</div>
<div class="LastDocument">
    <div class="ldImgDiv"><img class="ldImg" src="./images/ic_sinav.svg"></div>
    <div class="ldTitle">Sınav 13.exam</div>
</div>
<div class="LastDocument">
    <div class="ldImgDiv"><img class="ldImg" src="./images/ic_sinav.svg"></div>
    <div class="ldTitle">Sınav 13.exam</div>
</div>
<div class="LastDocument">
    <div class="ldImgDiv"><img class="ldImg" src="./images/ic_sinav.svg"></div>
    <div class="ldTitle">Sınav 18.exam</div>
</div>

变量st是Set，即它包含一组值，但保证它们是唯一的。 Set可以在一定时间内回答一个值是否已经在Set中（使用has），这使得它优于使用Array indexOf }不是以常数运行，而是以线性时间运行。

然后querySelectorAll用于获取我们感兴趣的元素列表。参数.LastDocument是CSS selector，因此元素列表将是那些元素班LastDocument。

使用for ... of循环迭代此列表。

对于每个元素，textContent被采用（和trimmed，但这可能不是必需的）。如果该文本值已存在于集合中，则该元素将从parentNode removeChild移除。

然后文本值为added到Set。请注意，如果Set已包含文本，则无效。

使用JavaScript

2 个答案: