隐藏父 div 时包含<textarea>&lt;i&gt;?&lt;/div&gt;&lt;/i&gt; &lt;b&gt;?&lt;/div&gt;&lt;/b&gt;</textarea><div id="text_translate"><p> 我有一个由其内容动态生成的 div 结构。 它看起来像这样：</p><pre> &lt;div class="fpd-list-row fpd-add-layer" id="1609962837979"&gt;&lt;div class="fpd-cell-0"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class="fpd-cell-1"&gt;Dein Foto&lt;/div&gt;&lt;div class="fpd-cell-2"&gt;&lt;span class="fpd-icon-add"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="fpd-list-row" id="1609962838288"&gt;&lt;div class="fpd-cell-0"&gt;&lt;span class="fpd-current-color" style="background: #ffffff" data-colors=""&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class="fpd-cell-1"&gt;&lt;textarea&gt;Wanderlust&lt;/textarea&gt;&lt;/div&gt;&lt;div class="fpd-cell-2"&gt;&lt;span class="fpd-lock-element"&gt;&lt;span class="fpd-icon-unlocked"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;</pre><p> 我只想隐藏 textareas 和 parent 元素到 .fpd-list-row 但保持其他 div like.fpd-list-row.fpd-add-layer 不变。 当我将 textarea 设置为不显示时，父 div 仍然存在。 有没有办法仅在包含&lt;textarea&gt;时将父 div 隐藏到 ..fpd-list-row ？</p></div>

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>