How to do jquery remove () on only one element
This is the first time i use jquery and im trying to figure out, do jquery remove () only remove one element with a specific class, not every element 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 another vote)
after clicking the up button, the jquery code removes the button containing the class vote, but if I have 2 buttons with the class vote then both will be removed. I only want to remove one click. any idea how?
<button type="button" class="btn btn-success btn-xs vote up" name="up" id="'.$reg['id'].'">BUTTON</button>
Thank you!
source to share
you need to add a reference to this in the click area to use in your success callback, then jQuery as if you had jQueried other this:
$(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 simplifies 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" );
}
});
}
});
});
source to share
You can declare a new variable that is referenced $(this)
so you can use it in scope $.ajax()
. Alternatively, you can also declare a context
function property $.ajax()
like this:
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
context: this, // Passes $(this)
success: function(html) {
parent.html(html);
$(this).remove();
$(".escondido").css("display", "block");
}
});
source to share