Steve Steve - 6 months ago 16
Javascript Question

Delete an element based on the child image name through JQuery

I plan on deleting all instances of an entire

<div>
from the page, if it has an image with a specific name. I am not sure if it's even possible with JQuery.

Here is my 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>


What I am hoping is, that all the
<div>
on my page with a class of
jk-content-module__image
should have the child
<div style="display: none;"> ... </div>
removed, if there is an
<img>
with a src of
blank_0.png
in it.

Hence if the image has a src of
blank_0.png
present, I want the entire
<div style="display: none;">
to be removed.

I hope I am clear.

I'll be grateful if you could assist.

Answer

You can use .filter() on ".jk-content-module__image" elements with parameter :has(img[src=blank_0.png]), .find() with parameter "div[style*='display: none']" note space character before none which matches current 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/

Comments