Usuń elementy onclick (w tym sam przycisk usuwania) z jQuery

Question

Wiem, że są pewne pytania, które wyglądają jak moje, ale w tym przypadku chcę usunąć również przycisk usuwania i nie wiem, jak mogę to zrobić .

Oto moje pytanie;

Dołączam 3 elementy z jQuery po kliknięciu przycisku dołączania. W tym przycisk usuwania.

Chcę ten przycisk usuwania, aby usunąć go self i dwa pozostałe elementy. Licznik powinien tworzyć identyczne identyfikatory, ale nie jestem pewien, czy zrobiłem to w odpowiedni sposób z jQuery.

Jak mogę usunąć trzy elementy, w tym przycisk Usuń?

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

}); 
}); 

góry dziękuję

Answer 1

moja propozycja byłaby tak.

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

Załóżmy ID Twojej przycisk Usuń jest # removebtn1234. Następnie

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

powinien działać

Ale dla łatwiejszej manipulacji z wielu elementów, proponuję, aby zmodyfikować następujące:

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

Oto rozwiązanie (co wydaje Messier niż powinien, ale nie mogę umieścić mój palec na nim).

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

W tym rozwiązaniu wykonuję zmienną referencyjną jQuery. W ten sposób możemy nazywać rzeczy takie jak checkBox.remove() i odniesie się tylko do tego pola wyboru (bez próbowania adresu URL).

Zmodyfikowałem to nieco i usunąłem tagi <br /> i zawinąłem wszystko w <div />. W ten sposób możesz po prostu usunąć div pojemnika i wszystkie elementy zostaną przeniesione.

Przykład: http://jsfiddle.net/jonathon/YuyPB/