how to make jquery remove() on just one item

Question

this is the first time i use jquery and im trying to figure out to to make jquery remove(), remove just one item with a specific class, not every item with the same class.

my code is like this jquery:

$(function() {

$(".vote").click(function() 
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if (name == 'up') {
    $(this).fadeIn(600).html('<span class="glyphicon glyphicon-ok"></span>');
    $.ajax({
        type: "POST",
        url: "up_vote.php",
        data: dataString,
        cache: false,

        success: function(html) {
            parent.html(html);
            $(".vote").remove();
            $(".escondido").css("display", "block");

        }
    });
}

(code continues with else vote down)

after clicking on a up button, the jquery code removes the button containing class vote, but if i have 2 buttons with class vote, both will be removed. i want to delete just the one clicked. any idea how?

<button type="button" class="btn btn-success btn-xs vote up" name="up" id="'.$reg['id'].'">BUTTON</button>

thank you!

Answer 1

you need to add a reference to this in the scope of the click for usage in your success callback, then jQuery it like you've jQueried other this's:

$(function() {

$(".vote").click(function() 
{
    var id = $(this).attr("id");
    var name = $(this).attr("name");
    var dataString = 'id='+ id ;
    var parent = $(this);
    var _this = this;
    if(name=='up')
    {
        $(this).fadeIn(600).html('<span class="glyphicon glyphicon-ok"></span>');
        $.ajax({
           type: "POST",
           url: "up_vote.php",
           data: dataString,
           cache: false,

           success: function(html)
           {
                parent.html(html);
                $( _this ).remove();
                $( ".escondido" ).css( "display", "block" );
           }  
        });
    }
});

as a bonus, here's a refactored version that saves some cpu cycles and prettyfies the code a bit:

$(function() {

    $(".vote").click(function() 
    {
        var $this = $(this),
            id = $this.attr("id"),
            name = $this.attr("name"),
            dataString = 'id='+ id;

        if(name=='up')
        {
            $this.fadeIn(600).html('<span class="glyphicon glyphicon-ok"></span>');
            $.ajax({
                type: "POST",
                url: "up_vote.php",
                data: dataString,
                cache: false,

                success: function(html)
                {
                    $this.html(html);
                    $this.remove();
                    $( ".escondido" ).css( "display", "block" );
                }  
            });
        }
    });
});