CODEWITHSUNDEEP
javascriptjqueryhtml
Steve
Steve

Reputation: 2586

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.

Upvotes: 1

Views: 647

Answers (5)

Ouroborus
Ouroborus

Reputation: 16896

Using jQuery:

$('img[src~=/blank_0.png]').closest('div[style*="display: none"]').remove();

In English: Find all img elements who's src attributes end in /blank_0.png. From there, find their closest ancestor elements who's style attributes contain display: none. Remove those ancestor elements.

May need to adjust the spacing in display: none as this needs to be exactly as it appears in the original.

In javascript:

[].slice.call(document.getElementsByTagName('IMG')).filter(function(e,i,a){
  return e.src.endsWith('/blank_0.png');
}).forEach(function(e,i,a){
  var t = e.parentNode;
  while(t != null && (t.nodeName != 'DIV' || t.style.display != 'none')){
    t = t.parentNode;
  }
  if(t != null && t.parentNode != null) {
    t.remove();
  }
});

Upvotes: 1

guest271314
guest271314

Reputation: 1

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/

Upvotes: 1

Jai
Jai

Reputation: 74738

You can use this: 

$(".jk-content-module__image div:hidden").filter(function() {
  return $(this).find('img').attr('src').indexOf('blank_0.png') !== -1
}).remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">
  visible image
    <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=""> hidden img</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Fiddle

Upvotes: 1

chungtinhlakho
chungtinhlakho

Reputation: 930

maybe something like this with JQuery?

    //get the src for your image
var imgSrc = $(".jk-content-module__image div img").attr('src').toLowerCase()
//see if it contains blank_0
if(imgSrc.indexOf('blank_0.png')>-1)
{
  //if true, remove the div
  $(".jk-content-module__image div")
}

Upvotes: 1

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

You can do like this:

$(document).ready(function() {
  var elements = $(".jk-content-module__image");
  elements.each(function(i, obj) {
    if ($(obj).find("div[style*='display: none'] img").attr("src").indexOf("blank_0.png") > 0) {
      $(obj).find(".hiddenDiv").remove();
    }

  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 class="hiddenDiv" 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>

Upvotes: 1

Related Questions