如何在JS中用特定内容隐藏DIV的父级

Question

当某个 DIV 包含特定文本时，我试图隐藏 DIV 的父项。

一个例子。这个DIV我想住：

<div class="report-per-day">
<div class="report-day">26 May 2022</div>
<div class="status-report-rows">
<p class="report__headline">This is our report</p>
</div>
</div>
</div>

但我想隐藏整个 DIV，因为有一个 DIV .mt-2，其中包含“没有新事件”。

<div class="report-per-day">
<div class="report-day">25 May 2022</div>
<div class="mt-2" style="display: none;">
<small class="text-muted">No new incident.</small>
</div>
</div>
</div>

我有这个 Java 脚本，但它只隐藏了 .mt-2。我还想隐藏它的 2 个父项，.report-per-day 和 .report-day

你们有什么建议吗？非常感谢！

const divs = document.getElementsByClassName('mt-2');

for (let x = 0; x < divs.length; x++) {
    const div = divs[x];
    const content = div.textContent.trim();
  
    if (content == 'No incidents reported.') {
        div.style.display = 'none';
    }
}

Answer 1

循环要隐藏的父 div 而不是 mt-2 并检查循环内 mt-2 的内容。尝试：

const divs = document.getElementsByClassName('report-per-day'); // report-per-day instead of mt-2

for (let x = 0; x < divs.length; x++) {
    const div = divs[x].querySelector('.mt-2'); // add a selector for .mt-2
    const content = div.textContent.trim();
  
    if (content == 'No incidents reported.') {
        div.style.display = 'none';
    }
}

Answer 2

您可以使用parentElement

const divs = document.getElementsByClassName('mt-2');

for (let x = 0; x < divs.length; x++) {
    const div = divs[x];
    const content = div.textContent.trim();
    if (content === 'No new incident.') {
        div.parentElement.style.display = 'none';
    }
}

<div class="report-per-day">
<div class="report-day">26 May 2022</div>
<div class="status-report-rows">
<p class="report__headline">This is our report</p>
</div>
</div>

<div class="report-per-day">
<div class="report-day">25 May 2022</div>
<div class="mt-2">
<small class="text-muted">No new incident.</small>
</div>
</div>

如何在JS中用特定内容隐藏DIV的父级

How to hide DIV's parent in JS with a specific content

html

javascript