Filter a word in a image src with jquery

Question

I am trying to filter for a specific word ("no-image") in my image src and if it returns true, I want to remove that particular image but keep the rest of the images.

This is my output:

<div class="product">
  <div class="image">
   <img src="mytee-red.jpg">
   <img src="mytee-blue.jpg">
   <img src="mytee-black.jpg">
   <img src="mytee-no-image.jpg">
 </div>
</div>

This is what I've tried so far but cant seem to get it working:

var keyword = "no-image";
 $(".product .image img").filter(function(index) {
    if ($(this).attr("src") == keyword) {
        $(this).remove();
    }
});

Any help would be great!!!

Answer 1

You could simplify this into a single command -

$(".product .image img[src*='no-image']").remove();

The jQuery attribute contains selector will help you pin-point the exact elements that you want containing the text "no-image" anywhere within the src attribute.

This is the most generous of the jQuery attribute selectors that match against a value. It will select an element if the selector's string appears anywhere within the element's attribute value.

Answer 2

$('.product .image img[src*="no-image"]').remove();

http://api.jquery.com/attribute-contains-selector/

No regex needed.