[英]Remove the parent div if child div is empty
I was trying to remove the whole parent div if it doesn't have the wc-gallery
class on it. 我正在尝试删除整个父div,如果它没有
wc-gallery
类。 What I have in my script is the reverse of what I need. 我在脚本中所拥有的与我所需要的相反。 Basically it hide everything that has the
wc-gallery
on it. 基本上,它隐藏了所有带有
wc-gallery
的东西。
SCRIPT: 脚本:
// Additional Scripts
$(window).load( function() {
$(".gallery-container2 .gallery-item .wc-gallery").hide();
});
$(".gallery-container2 p").click(function() {
var id = $(this).data('id');
$("[data-id=" + id + "].gallery-item .wc-gallery").toggle()
});
$(function(){
$(".gallery-item").each(function(){
$(this).children('.wc-gallery').parents('.gallery-container2').hide();
});
});
Basically this will work fine if I Hide all the containers and display the child div afterwards though my content won't render due to script conflicts. 基本上,如果我隐藏所有容器并在此后显示子div,尽管我的内容由于脚本冲突而无法呈现,但这将很好地工作。 Only way to solve this without conflict is to load first all of the containers then
hide()
or remove()
them. 解决此问题的唯一方法是先加载所有容器,然后
hide()
或remove()
。
SCRIPT: (conflict due to onload content rendering) 脚本:(由于加载内容呈现而引起的冲突)
$('.gallery-container2').hide();
$(function(){
$(".gallery-item").each(function(){
$(this).children('.wc-gallery').parents('.gallery-container2').show();
});
});
HTML: (1st set is the one should be visible 2nd set is the one that needs to be remove or hide.) HTML :(第一组是应该可见的第二组是需要删除或隐藏的组。)
<ul>
<li><div class="gallery-container2">
<p data-id="1723"><strong>some text</strong></p>
<div class="gallery-item" data-id="1723">
<div class="wc-gallery" style="display: none;"></div>
</div>
</div></li>
<li><div class="gallery-container2">
<p data-id="2455"><strong>View before and after</strong></p>
<strong></strong>
<div class="gallery-item" data-id="2455">
<div><div></div></div>
</div>
</div></li>
</ul>
Loop through the '.gallery-container2' element and find out whether it has '.wc-gallery' children. 遍历“ .gallery-container2”元素,并确定其是否具有“ .wc-gallery”子元素。 if not hide the element.
如果没有隐藏元素。
$('.gallery-container2').each(function(){
var $this = $(this);
//find element with 'wc-gallery' class
var hasGallery = $this.find('.wc-gallery').length > 0;
if(!hasGallery){
$this.hide();
}
});
Pure JS you might do like this in ES6 terms. 用ES6术语,您可能会喜欢纯JS。
var divsToHide = document.querySelectorAll("div div :not(.wc-gallery)"); for (var div of divsToHide) div.parentElement.parentElement.style.display = "none";
<div class="gallery-container2"> <p data-id="1723"><strong>some text</strong> </p> <div class="gallery-item" data-id="1723"> <div class="wc-gallery">first container</div> </div> </div> <div class="gallery-container2"> <p data-id="1724"><strong>some text</strong> </p> <div class="gallery-item" data-id="1724"> <div> <div>second container</div> </div> </div> </div>
Try this. 尝试这个。 If div has children with class
.wc-gallery
than it will show the parent otherwise hide the parent. 如果div有
.wc-gallery
类的子级,则它将显示父级,否则将隐藏父级。
$(function () {
$(".gallery-item").each(function () {
if($(this).children('.wc-gallery').length > 0)
$(this).parents('.gallery-container2').show();
else
$(this).parents('.gallery-container2').hide();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.