如何根据其子节点删除父节点和/或 css 样式

Question

我有一个需要"填充底部：15px"css样式的父节点。一些子元素是从视图中过滤掉的，这导致父节点以"底部填充：15px"的 css 样式保留在 DOM 中，这看起来很奇怪 - 这会导致其他文本被推到页面下方。

当所有子元素都"显示：隐藏"时，如何完全删除父节点，或者只删除 css 填充？

我尝试使用 Javascript - 请不要使用 jQuery - 在子元素包含特定类时删除父节点。如果存在此类，请删除父节点。问题是，如果有多个子元素，一旦代码遇到一个用某个类标记的子元素，它就会删除父元素。如果所有子元素都是"display：hidden"，我只希望删除父元素/删除填充。

我确实考虑过编写一些 Javascript 来根据子节点将类添加到父节点，然后检查父类，如果它们包含一个指示视图中有子元素的"活动"类，则不会删除父节点。但是，我目前的Javascript技能有限，所以我不知道从哪里开始。

下面的代码是我整理在一起以帮助解释我的情况的代码。但为了澄清起见，我正在使用带有 for 循环的 Vue.js。for 循环遍历数据并动态确定要分配的类 - 过滤/未过滤。

实际代码片段：

<div
v-for="(originalText, lineIndex) in originalTexts"
:key="lineIndex"
:class="{ paragraph : true }"
>
<span
v-for="(text, sentIndex) in originalText"
:key="sentIndex"
class="originalText"
:class="[dataView === 'Flagged' && text.f ? '' : 
dataView === 'Completed' && text.c ? '' :
dataView === 'In-progress' && text.v && !text.c ? '' :
dataView === 'Not started' && !text.v ? '' : 
dataView === 'All' ? '' : 'filteredText']"
>

小提琴代码来帮助我的解释：

<div>
<div class="paragraph">
<span class="filteredText">This is the first filtered text.</span>
<br />
<span>This is the first unfiltered text and I expect it to be displayed on screen.</span>
</div>
<div class="paragraph">
<span class="filteredText">This is the second filtered text.</span>
</div>
<div class="paragraph">
<span>This is the second unfiltered text and I expect it to be displayed on screen.</span>
</div>
<button onclick="filterText()">
Filter text
</button>
</div>

function filterText() {
var elements = document.getElementsByClassName('filteredText');
while(elements.length > 0){
console.log(elements[0].parentNode)
console.log(elements[0])
elements[0].parentNode.remove(elements[0].parentNode);
}
}

.paragraph {
padding-bottom: 15px;
}

JS小提琴：https://jsfiddle.net/h93qtxo6/18/

我希望仅当所有子元素都包含"display：none"的特定类/css 样式时，才删除父节点和/或填充。最好我只想删除样式，但从我所读到的内容来看，这并不容易实现。

Answer 1

要执行所需的操作，必须从父级中删除类，并从父级中使用 removeChild 函数。

function filterText() {
var elements = document.getElementsByClassName('filteredText');
while(elements.length > 0){
var parent = elements[0].parentNode;
if(parent.classList.contains('nonFilteredTextChild')){
parent.classList.remove('paragraph');
parent.classList.remove('filteredTextChild');
parent.removeChild(elements[0]);    
} else {
parent.remove(parent);
}
};
}

JS小提琴：https://jsfiddle.net/v9Lwhqrz/