Jquery / javascript remove div if jpg doesn't 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 the class "first div" if there is no background image: url(https://good.jpg); ? so the final answer 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 help, thanks!

Answer 1

Here is the 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 delimiters with content using 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 to go through all the .text-icon elements with each jQuery function .

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

Answer 5

Working example using slice to retrieve 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(); } }); 

Answer 6

You can achieve this as shown 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(); 

Answer 7

You can try this

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

If you want to remove the entire class "first div".