Remove elements onclick (including the remove button itself) with jQuery
my suggestion would be like this.
$(function () {
var counter = 0;
$('a').click(function () {
var elems = '<div>'+
'<input type="checkbox" id="checkbox"' + (counter) + '" class="item"/>' +
'<input type="text" id="t1"' + (counter) + '"/>' +
'<input type="button" class="removebtn" value="." id="removebtn"' + (counter) + '"/>' +
'</div>';
$('#box').append(elems);
$("#box").append("<br />");
$("#box").append("<br />");
counter++;
});
$('.removebtn').live(function () {
$(this).parent().remove();
});
});
simple demo
Suppose your remove button's id is #removebtn1234. Then
$("#removebtn1234").click(function(){
$(this).remove();
});
should work
But for easier manipulation on multiple items, I suggest you modify to following:
$('a').click(function() {
$('#box').append('<input type="checkbox" data-id="' + counter + '"/>');
$('#box').append('<input type="text" data-id="' + counter + '"/>');
$('#box').append('<input type="button" value="." class="removebtn" data-id="' + counter + '"/>');
$("#box").append("<br /><br/>");
counter++;
});
$(".removebtn").click(function(){
var id = $(this).data("id");
$("*[data-id=" + id + "]").remove();
});
Here's a solution (which seems messier than it should, but I can't place my finger on it).
$(function() {
var counter = 0;
$('a').click(function() {
var checkBox = $('<input type="checkbox" id="checkbox' + (counter) + '"/>'),
textBox = $('<input type="text" id="t1' + (counter) + '"/>'),
removeButton = $('<input type="button" value="." id="removebtn' + (counter) + '"/>'),
containerDiv = $("<div />");
removeButton.click(function(e) {
e.preventDefault();
containerDiv.remove();
});
containerDiv
.append(checkBox)
.append(textBox)
.append(removeButton);
counter++;
$("#box").append(containerDiv);
});
});
In this solution, I make a variable of the jQuery reference. This way we can call things like checkBox.remove()
and it will reference only that checkbox (without trying to work out the URL).
I have modified it a bit and removed the <br />
tags and wrapped everything in a <div />
. This way you can just remove the container div and all the elements will go.
Example: http://jsfiddle.net/jonathon/YuyPB/