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

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>

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>

Answer 2

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>