Steve Steve - 1 year ago 64
Javascript Question

Delete an element based on the child image name through JQuery

I plan on deleting all instances of an entire

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="">
<div style="display: none;">
<div id="colorbox-inline-1">
<li class="first last"><a href="" title="" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-2"><img typeof="foaf:Image" src="" alt="" title=""></a></li>

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

Hence if the image has a src of
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 Source

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() {
  .find("div[style*='display: none']").remove()