Удалите элементы onclick (включая кнопку удаления самостоятельно) с помощью jQuery

Question

Я знаю, что есть некоторые вопросы, которые выглядят как мои, но в этом случае я хочу, чтобы кнопка удаления также была удалена, и я не знаю, как я могу это сделать ,

Вот мой вопрос;

Я добавляю 3 элемента с jQuery, когда нажата кнопка добавления. Включая кнопку удаления.

Я хочу, чтобы эта кнопка удаления удаляла ее и другие два элемента. Счетчик должен делать одинаковые идентификаторы, но я не уверен, правильно ли я сделал это с помощью jQuery.

Как я могу удалить три элемента, включая кнопку удаления 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"); 

}); 
}); 

спасибо заранее

Answer 1

мое предложение было бы, как это.

$(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

Answer 2

Предположит, идентификатор вашей кнопки УДАЛИТЬ является # removebtn1234. Тогда

$("#removebtn1234").click(function(){ 
    $(this).remove(); 
}); 

должен работать

Но для облегчения манипуляций по нескольким пунктам, я предлагаю вам изменить к следующему:

$('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(); 
}); 

Answer 3

Вот решение (которое кажется хаотичным, чем следовало, но я не могу разместить свой палец на ней).

$(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); 
    }); 
}); 

В этом решении я делаю переменную ссылки jQuery. Таким образом, мы можем назвать такие вещи, как checkBox.remove(), и он будет ссылаться только на этот флажок (не пытаясь выработать URL-адрес).

Я немного изменил его и снял теги <br /> и завернул все в <div />. Таким образом вы можете просто удалить контейнер div, и все элементы будут идти.

Пример: http://jsfiddle.net/jonathon/YuyPB/