16

I know there are some questions up which look like mine, but in this case I want the remove button to be removed as well and I don't know how I can do this.

Here is my question:

I append 3 elements with jQuery when an append button is clicked. Including a remove button.

I want this remove button to remove it self and the other two elements. The counter should make identical Id's, but i'm not sure if i did this right way with jQuery.

How can i delete three elements including the remove button onclick?

$(function() {
    var counter = 0;
    
    $('a').click(function() {
        $('#box').append('<input type="checkbox" id="checkbox" + (counter) + "/>');
        $('#box').append('<input type="text" id="t1" + (counter) + "/>');
        $('#box').append('<input type="button" value="." id="removebtn" + (counter) + "/>');
        $("#box").append("<br />");
        $("#box").append("<br />");
        counter++;
    });
         
    $('removebtn').click(function() {
        remove("checkbox");
    });
});
Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Opoe
  • 1,337
  • 8
  • 30
  • 56

3 Answers3

21

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

Reigel Gallarde
  • 64,198
  • 21
  • 121
  • 139
  • 2
    Just mentioning, for any reader using jQuery version >=1.7, the .live() method is now deprecated. We should use the .on() method to attach event handlers.So the last few lines should be changed to : $(document).on('click', '.removebtn', function () { $(this).parent().remove(); – skechav Nov 18 '16 at 01:28
6

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();
});
xandy
  • 27,357
  • 8
  • 59
  • 64
  • Like this? $("#removebtn1234").click(function(){ $(this).remove(); $("el1" + counter").remove(); $("el2" + counter").remove(); }); – Opoe Dec 17 '10 at 09:23
  • I modified the answer, you can still put id, but I simply draws the id out to be data field for easier manipulation. – xandy Dec 17 '10 at 09:26
  • Thank you very much xandy, the appendbutton doesnt append anything anymore with this code though – Opoe Dec 17 '10 at 09:33
4

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/

Jonathon Bolster
  • 15,811
  • 3
  • 43
  • 46
  • Thanks, better then the Correct answer cause it works even after jquery 1.9.1 versions. – Tibix Aug 03 '17 at 12:03