隱藏父 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

我有一個由其內容動態生成的 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 和 parent 元素到 .fpd-list-row 但保持其他 div like.fpd-list-row.fpd-add-layer 不變。 當我將 textarea 設置為不顯示時，父 div 仍然存在。 有沒有辦法僅在包含<textarea>時將父 div 隱藏到 ..fpd-list-row ？

Answer 1

遍歷所有 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>

Answer 2

檢查父 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 的創意）：

 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。

但是，您可以只使動態內容不生成 textarea 並在 css 中使用div:blank偽 class。

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

有問題的代碼更新后更新。

 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>