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?

    <script type="text/javascript">
   $(document).ready(function() {
       $(".removebutton").submit(function(event){

       event.preventDefault();
            $.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);
                        $('.span8').removeClass('.video_id', this);

                    }
            });
            return false;
       });

    });
</script>

<div class = "span8" style = "width: 900px;">
<!-- wrapper div -->
    <div class='wrapper huluDotCom'>

    <!-- image -->
    <div class="image" style="position: relative; left: 0; top: 0;">

            <a href = "/partners/Business/huluDotCom">
                <img src = "/huluDotCom.png">
            </a>


        <!--  munchbutton div --> 
        <div class='munchbutton'>
            <form method='post' action = '/munch_video/ ' class = 'removebutton'><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='dKrS8NzqPWFLM6u8wJrAeid4nGw1avGK' /></div>
                <input type="hidden" value="Channel" class = "playlist"/>
                <input type="hidden" value="huluDotCom" class = "video_id"/>
                <input type="hidden" value="remove_video" class = "add_remove"/>

                <input type='submit' class="btn btn-danger" value='Remove from plate'/>
            </form>
        </div>
        <!-- end munchbutton div -->


    </div>
    <!-- end image div -->

    </div>
    <!-- end wrapper div -->


    <!-- wrapper div -->
    <div class='wrapper TheEllenShow'>

    <!-- image -->
    <div class="image" style="position: relative; left: 0; top: 0;">

            <a href = "/partners/Business/TheEllenShow">
                <img src = "/TheEllenShow.png">
            </a>


        <!--  munchbutton div --> 
        <div class='munchbutton'>
            <form method='post' action = '/munch_video/ ' class = 'removebutton'><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='dKrS8NzqPWFLM6u8wJrAeid4nGw1avGK' /></div>
                <input type="hidden" value="Channel" class = "playlist"/>
                <input type="hidden" value="TheEllenShow" class = "video_id"/>
                <input type="hidden" value="remove_video" class = "add_remove"/>

                <input type='submit' class="btn btn-danger" value='Remove from plate'/>
            </form>
        </div>
        <!-- end munchbutton div -->


    </div>
    <!-- end image div -->

    </div>
    <!-- end wrapper div -->

</div>

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