Question

I have a piece of code that, when the page loads, checks through a series of images and sees whether their id contains the word video.

If it does, I want to be able to remove the anchor tag surrounding the image. However, teh way that I am currently doing this (through .remove()) removes the image as it is within the anchor tag I’m removing.

Is there a way of just removing the anchor tag?
NOTE: the list of images will be pulled in based on the user accessing them, so it won’t be pre-determined code that can be appended in.

CODE:

$(document).ready(function() {
    $('ul.thumbnails li a img').each(function() {
        if($(this).attr('id').indexOf('video') != -1){
            var $parent = $(this).closest('a');
            $parent.remove();
        } else {
            $(this).addClass('photo');
        }
    });
});

Answer 1

Try using jQuery unwrap:

$(document).ready(function() {
    $('ul.thumbnails li a img').each(function() {
        if($(this).attr('id').indexOf('video') != -1){
            $(this).unwrap();
        } else {
            $(this).addClass('photo');
        }
    });
});