jquery/javascript remove div if jpg not match

Question

I have this html code:

<div class="first div">
    <div class="second">  
        <div class="title">Hi</div>
        <div class="test-icon" style="background-image: url(https://1.jpg);"></div>
    </div>
</div>
<div class="first div">
    <div class="second">  
        <div class="title">Hi</div>
        <div class="test-icon" style="background-image: url(https://12.jpg);"></div>
    </div>
</div>
<div class="first div">
    <div class="second">  
        <div class="title">Hi</div>
        <div class="test-icon" style="background-image: url(https://123.jpg);"></div>
    </div>
</div>
<div class="first div">
    <div class="second">  
        <div class="title">Hi</div>
        <div class="test-icon" style="background-image: url(https://good.jpg);"></div>
    </div>
</div>

Is it possible to delete all elements with "first div" class if the background image is not: url(https://good.jpg);? so the final response will be:

<div class="first div">
    <div class="second">  
        <div class="title">Hi</div>
        <div class="test-icon" style="background-image: url(https://good.jpg);"></div>
    </div>
</div>

I would be grateful for any assistance, thank you!

Can we see your Ajax JS? You don't need to "delete" the html, just select the one you need. — evolutionxbox
– evolutionxbox, Commented Oct 23, 2016 at 10:32

gschambial · Accepted Answer · 2016-10-23 11:15:37Z

4

Here is a WORKING FIDDLE of your example:

$('.first').find('.test-icon').each(function(){
    if($(this).css('background-image').indexOf("good") == -1){
      $(this).closest('.first').remove();
    }    
});

Check FIDDLE to add multiple images

$('.first').find('.test-icon').each(function(){
    if($(this).css('background-image').indexOf("good.jpg") == -1 &&
        $(this).css('background-image').indexOf("good1.jpg") == -1 &&
          $(this).css('background-image').indexOf("good2.jpg") == -1){
      console.log($(this).closest('.first').remove());
    }    
});

edited Oct 23, 2016 at 11:15

answered Oct 23, 2016 at 10:40

gschambial

1,3892 gold badges11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Alexandru Vorobchevici Over a year ago

Thank you so much! This is really working, thank you so much! It is possible to add multiple good images in this script:

gschambial Over a year ago

@AlexandruVorobchevici Glad, i could help. You can mark the answer as done for others' reference.

Alexandru Vorobchevici Over a year ago

how can I add multiple images in this code? like good.jpg, good1.jpg, thank you again!

Alexandru Vorobchevici Over a year ago

No, I want a white list for specified images! something like gtrskxd.jpg, mfhdj54.jpg, andsj54k2.jpg

gschambial Over a year ago

Then you can simply add OR condition in the if block

KAD · Accepted Answer · 2016-10-23 11:05:31Z

2

Filter the divs having content with good.jpg and remove the negation with not() and remove():

    $('.first.div').not($('.first.div').filter(
          function(index, element)
          {
               return $(element)
                 .find(".test-icon")
                 .css('background-image').indexOf("good") >= 0
          }
    )).remove();

edited Oct 23, 2016 at 11:05

answered Oct 23, 2016 at 10:51

KAD

11.2k4 gold badges34 silver badges75 bronze badges

3 Comments

Marcs Over a year ago

Why using the not function when you can simple switch >= with < ?

KAD Over a year ago

If it is that simple, post it as answer and get a green tick for the simplest answer

Marcs Over a year ago

I was honestly asking if there is a specific reason or not, if not it is indeed redundant. Don't you agree?

Tân · Accepted Answer · 2016-10-23 10:35:28Z

1

var first_div = $('div.first.div');

for (var i = 0; i < first_div.length; i++) {
    var background_image = $(first_div[i]).find('.test-icon').css('background-image');

    if (background_image !== 'url(https://good.jpg)') {
        $(first_div[i]).remove();
    }
}

Hope this help!

answered Oct 23, 2016 at 10:35

Tân

1

3 Comments

Kaiido Over a year ago

All browsers don't serialize CSS rules the same, e.g, your code will work on Safari, but not on chrome nor FF which will convert it to 'url("https://good.jpg")'

Tân Over a year ago

@Kaiido Are you sure? How have you checked it? I just test again. It's working good on both Chrome and FF.

Kaiido Over a year ago

I tested it on chrome 54, FF 50, and safari 9.1.3 all on osx and the results are the ones I gave you. It's probable that results do even differ between different versions of the same browser, and on different platforms.

oguzhancerit · Accepted Answer · 2016-10-23 10:52:06Z

1

You need traverse all .text-icon elements with each function of JQuery.

$( "div.first .text-icon" ).each(function( ) {
 if( $( this ).css('background-image')!='url(https://good.jpg)' ) {
   $( this ).remove();
 }
});

edited Oct 23, 2016 at 10:52

answered Oct 23, 2016 at 10:39

oguzhancerit

1,5831 gold badge18 silver badges29 bronze badges

1 Comment

Kaiido Over a year ago

Even the ones with the correct background-image will be removed here

ettanany · Accepted Answer · 2016-10-23 13:26:26Z

1

Working example using slice to extract each image url:

$('.first').each(function(){
    var img_url = $(this).find('.test-icon').css('background-image').slice(5, -2);
    if (img_url != "https://good.jpg/"){
        $(this).remove();
    }
});

edited Oct 23, 2016 at 13:26

answered Oct 23, 2016 at 10:54

ettanany

20k9 gold badges49 silver badges64 bronze badges

Comments

Deniz R. · Accepted Answer · 2016-10-23 10:57:02Z

0

You could achieve this like below:

var bg = $('first').find('.text-icon').filter(function(bg) {
    return $(bg).css('background-image') === 'url(https://good.jpg)'; 
    //although you should use '/good.jpg') 
)};
bg.hide();

edited Oct 23, 2016 at 10:57

answered Oct 23, 2016 at 10:37

Deniz R.

606 bronze badges

1 Comment

Kaiido Over a year ago

All browsers don't serialize CSS rules the same, e.g, your code will work on Safari, but not on chrome nor FF which will convert it to 'url("https://good.jpg")'

Donald Wu · Accepted Answer · 2016-10-23 10:32:35Z

-1

You can try this

if ($('.test-icon').attr('background-image') != "https://good.jpg") {
   $('.first div').remove();
}

If you want to delete the all "first div" class..

answered Oct 23, 2016 at 10:32

Donald Wu

7167 silver badges21 bronze badges

1 Comment

nbrooks Over a year ago

This removes pretty much everything in the posted HTML fragment. It's typically a good idea to test code before recommending it to others.

Collectives™ on Stack Overflow

jquery/javascript remove div if jpg not match

7 Answers 7

5 Comments

3 Comments

3 Comments

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

3 Comments

3 Comments

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related