How Do I Remove An Element Class After Success?

Question

When the user clicks on a button in the form associated with it's image, I'd like the image to disappear on success. I'm having trouble implementing this. Any advice?

Solution 1:

First your location of event.preventDefault(); Because it will stop stop default excution.

So it should be just about the return statement.

Second you needn't have to add any other parameter for removeClass so it will goes like

$this.closest('.image').remove();

Where $this is a saved ref. if $(this)

Third, I could not able to find any element with class span8 as well as video_id So you need to give whole code or recheck all the elements once again.

Last, also check the out the php code whether it is giving correct result or sending any error

Try this.

$(".removebutton").submit(function(event){
        var $this = $(this);
        $.ajax({
             type:"POST",
             url:"/munch_video/",
             data: {
                    'video_id': $('.video_id', this).val(), // from form
                    'playlist': $('.playlist').val(), // from form
                    'add_remove': $('.add_remove').val(), // from form 
                    },
             success: function(message){                         
                    alert(message);
                    $this.closest('.image').remove();

                }
        });
        event.preventDefault();
        return false;
   });

Solution 2:

$('.span8').removeClass('video_id') no dot in the parameters of classes

Edit: As u asked for img to get removed from a div

$('.span8').find('img').remove()

to remove all images in the div,

$('.span8').find('img.video_id').remove()

to remove img's with video_id class,

if you want to just hide the element

$('.span8').find('.video_id').hide()

Solution 3:

removeClass takes only the className and no need to provide selector element inside it

$('.span8').removeClass('video_id');

Thanks

Solution 4:

I can't see why the image would disappear as there's nothing changing its display. How about this:

$('.span8').removeClass('video_id').addClass('goaway');

and add css .goaway { display:none; }

Solution 5:

I'd start with your .removeClass() call. It takes only one argument, this is being ignored. And the name of the class doesn't need a period in front of it.

//$('.span8').removeClass('.video_id', this);
$('.span8').removeClass('video_id');

Edit: It's sounds like you might need to work on your traversal. I'll assume that you have a button and an image inside of a <div class="span8">, something like the following

<div class="span8">
    <img src="cat.jpg" />
    <a href="#" class="removebutton">remove</a>
</div>

Then you'd need to move from your target, up to the div, and drill down the img.

$(this).closest('.span8').find('img').remove();

Html5 Dev