包含 <textarea> 时隐藏父 div？

如何解决包含 <textarea> 时隐藏父 div？

我有一个由其内容动态生成的 div 结构。它看起来像这样：

<div class="fpd-list-row fpd-add-layer" id="1609962837979"><div class="fpd-cell-0"><span></span></div><div class="fpd-cell-1">Dein Foto</div><div class="fpd-cell-2"><span class="fpd-icon-add"></span></div></div>
<div class="fpd-list-row" id="1609962838288"><div class="fpd-cell-0"><span class="fpd-current-color" style="background: #ffffff" data-colors=""></span></div><div class="fpd-cell-1"><textarea>Wanderlust</textarea></div><div class="fpd-cell-2"><span class="fpd-lock-element"><span class="fpd-icon-unlocked"></span></span></div></div>

我只想隐藏 textareas 和父元素直到 .fpd-list-row 但保持其他 div 像 .fpd-list-row .fpd-add-layer 不变。当我将 textarea 设置为不显示时，父 div 仍然存在。有没有办法将父 div 隐藏到 ..fpd-list-row 仅当它包含 <textarea> 时？

解决方法

循环遍历所有 div，并使用 .find() 检查与某个选择器匹配的父元素。

$(document).ready(function(){
  var divs = $("div");
  for(var i = 0; i < divs.length; i++){
    var current = divs[i];
    if($(current).find("textarea").length != 0){
      current.style.display='none';
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fpd-cell-1"><textarea>My Text</textarea></div>
<div class="fpd-cell-2"><span class="fpd-lock-element">fpd-lock-element<span class="fpd-icon-unlocked">fpd-icon-unlocked</span></span></div>
<div class="fpd-cell-3"><textarea>My Text</textarea></div>

对于最简洁的解决方案（一个班轮），请使用：

$(document).ready(function(){
  jQuery('textarea').parent().hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fpd-cell-1"><textarea>My Text</textarea></div>
<div class="fpd-cell-2"><span class="fpd-lock-element">fpd-lock-element<span class="fpd-icon-unlocked">fpd-icon-unlocked</span></span></div>
<div class="fpd-cell-3"><textarea>My Text</textarea></div>

,

检查父 div 的子级：

divs = document.getElementsByTagName("DIV")
for (var i = 0; i < divs.length; i++) {
  if (divs[i].childElementCount == 1 && divs[i].children[0].tagName.toLowerCase() == "textarea") {
    divs[i].style.display = "none";
  }
  else { //for demonstration purposes
    divs[i].style.backgroundColor="red"
  }
}

<div class="fpd-cell-1"><textarea>My Text</textarea></div>
<div class="fpd-cell-2"><span class="fpd-lock-element">Outer Span<span class="fpd-icon-unlocked">Inner Span</span></span>
</div>
<div class="fpd-cell-3"><textarea>My Text</textarea></div>

或者，移除textarea的父级（Spectric的idea credit）：

textareas = document.getElementsByTagName("TEXTAREA")
for (var i = 0; i < textareas.length; i++) {
  textareas[i].parentNode.style.display = "none"
}

<div class="fpd-cell-1"><textarea>My Text</textarea></div>
<div class="fpd-cell-2"><span class="fpd-lock-element">Outer Span<span class="fpd-icon-unlocked">Inner Span</span></span>
</div>
<div class="fpd-cell-3"><textarea>My Text</textarea></div>

第一个示例仅在其中有一个元素时隐藏 div，并且它是 textarea，而第二个方法隐藏 textarea 的父级。因此，第一个可以用于需要 textarea 的情况，第二个在任何情况下都不会显示任何 textarea。

但是，您可以让动态内容不生成文本区域并在 css 中使用 div:blank 伪类。

--------------- 更新 ---------------

在有问题的代码更新后更新。

textareas = document.getElementsByTagName("TEXTAREA")
for (var i = 0; i < textareas.length; i++) {
  textareas[i].parentNode.parentNode.style.display = "none"
}

<div class="fpd-list-row fpd-add-layer" id="1609962837979">
  <div class="fpd-cell-0"><span></span></div>
  <div class="fpd-cell-1">Dein Foto</div>
  <div class="fpd-cell-2"><span class="fpd-icon-add"></span></div>
</div>
<div class="fpd-list-row" id="1609962838288">
  <div class="fpd-cell-0"><span class="fpd-current-color" style="background: white" data-colors=""></span></div>
  <div class="fpd-cell-1"><textarea>Wanderlust</textarea></div>
  <div class="fpd-cell-2"><span class="fpd-lock-element"><span class="fpd-icon-unlocked"></span></span>
  </div>
</div>