javascript - 通过JQuery根据子图片名称删除一个元素

Question

我计划删除整个 <div> 的所有实例从页面，如果它有一个特定名称的图像。我不确定 JQuery 是否可行。

这是我的 HTML:-

<div class="jk-content-module__image">
    <a href="#" class="colorbox-inline init-colorbox-inline-processed cboxElement" rel="gallery-1"></a>

    <a href="path-to-img" title="" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-2">
        <img typeof="foaf:Image" src="path-to-img" alt="" title="">
    </a>
    <div style="display: none;">
        <div id="colorbox-inline-1">
            <ul>
                <li class="first last"><a href="http://thesite.com/sites/default/files/default_images/blank_0.png" title="" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-2"><img typeof="foaf:Image" src="http://thesite.com/sites/default/files/default_images/blank_0.png" alt="" title=""></a></li>
            </ul>
        </div>
    </div>
</div>

我希望的是，所有 <div>在我的页面上有一类 jk-content-module__image应该有 child <div style="display: none;"> ... </div>删除，如果有 <img>源代码为 blank_0.png在里面。

因此，如果图像的 src 为 blank_0.png目前，我想要整个 <div style="display: none;">将被删除。

我希望我是清楚的。

如果您能提供帮助，我将不胜感激。

Answer 1

您可以在 ".jk-content-module__image" 元素上使用 .filter() 参数 :has(img[src=blank_0.png] ), .find() with parameter "div[style*='display: none']" 注意 none 前的空格字符> 匹配当前 html, .remove()

$(function() {
  $(".jk-content-module__image").filter(":has(img[src*='blank_0.png'])")
  .find("div[style*='display: none']").remove()
})

jsfiddle https://jsfiddle.net/ks6b596n/1/