Eliminar elementos onclick (incluido el botón eliminar) con jQuery

Question

Sé que hay algunas preguntas que se parecen a las mías, pero en este caso quiero que también se elimine el botón eliminar y no sé cómo puedo hacerlo. .

Aquí está mi pregunta;

Añado 3 elementos con jQuery cuando se hace clic en un botón de agregar. Incluyendo un botón para eliminar.

Quiero este botón para eliminarlo uno mismo y los otros dos elementos. El contador debe hacer identificaciones idénticas, pero no estoy seguro de haberlo hecho correctamente con jQuery.

¿Cómo puedo eliminar tres elementos, incluido el botón eliminar al hacer clic?

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

}); 
}); 

gracias de antemano

Answer 1

mi sugerencia sería así.

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

Supongamos identificación de su botón de eliminación es # removebtn1234. Entonces

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

debería funcionar

Sin embargo, para facilitar la manipulación en artículos múltiples, le sugiero que modifica al siguiente:

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

he aquí una solución (que parece más desordenado de lo que debería, pero no puedo poner mi dedo sobre ella).

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

En esta solución, hago una variable de la referencia jQuery. De esta forma podemos llamar a cosas como checkBox.remove() y solo hará referencia a esa casilla de verificación (sin tratar de calcular la URL).

Lo he modificado un poco y eliminado las etiquetas <br /> y envuelto todo en un <div />. De esta forma, puedes eliminar el contenedor div y todos los elementos irán.

Ejemplo: http://jsfiddle.net/jonathon/YuyPB/