CODEWITHSUNDEEP
javascripthtmljquerycsshide
Chris
Chris

Reputation: 17

Hide parent div when it contains <textarea>?

I have got a div structure that is dynamically generated by it's content. It is looking like this:

<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>

I want to hide only the textareas and the parents element up to .fpd-list-row but keep the other div like .fpd-list-row .fpd-add-layer untouched. When I set the textarea to display none, the parent divs still exists. Is there a way hide the parent div up to ..fpd-list-row only when it contains <textarea>?

Upvotes: 0

Views: 216

Answers (2)

Endothermic_Dragon
Endothermic_Dragon

Reputation: 1187

Check the children of the parent 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>

Or, remove the parent of the textarea (idea credit of Spectric):

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>

The first example hides the div only if there is one element in it, and it is the textarea, whereas the second method hides the parent of the textarea. Therefore, the first one can be used in situations where you need a textarea, and the second one just won't show any textareas regardless of the situation.

However, you could just make the dynamic content not generate the textarea and use a div:blank pseudo class in the css.

--------------- UPDATE ---------------

Update after code was updated in question. 

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>

Upvotes: 1

Spectric
Spectric

Reputation: 31992

Loop through all divs, and use .find() to check for parent elements matching a certain selector.

$(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>

For the most concise solution (one liner), use:

$(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>

Upvotes: 1

Related Questions