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!

Answer 1

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());
    }    
});

Answer 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();

Answer 3

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!

Answer 4

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();
 }
});