javascript - Hide parent div when it contains <textarea>?

Question

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

question from:https://stackoverflow.com/questions/65601903/hide-parent-div-when-it-contains-textarea

Answer 1

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>