Xóa phần tử onclick (bao gồm cả nút xóa) với jQuery

Question

Tôi biết có một số câu hỏi giống như của tôi, nhưng trong trường hợp này, tôi cũng muốn xóa nút xóa và tôi không biết làm cách nào để thực hiện việc này .

Đây là câu hỏi của tôi;

Tôi nối thêm 3 phần tử với jQuery khi nhấn vào nút chắp thêm. Bao gồm nút xóa.

Tôi muốn nút xóa này tự xóa nút đó và hai yếu tố khác. Số lượt truy cập phải làm cho Id giống hệt nhau, nhưng tôi không chắc chắn nếu tôi đã làm đúng cách này với jQuery.

Tôi làm cách nào để xóa ba yếu tố bao gồm nút xóa khi nhấp?

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

}); 
}); 

cảm ơn bạn trước

Answer 1

đề nghị của tôi sẽ như thế này.

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

Giả id nút remove của bạn là # removebtn1234. Sau đó

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

nên làm việc

Nhưng đối với thao tác dễ dàng hơn trên nhiều mặt hàng, tôi đề nghị bạn sửa đổi để sau:

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

Dưới đây là một giải pháp (mà có vẻ hỗn độn hơn cần, nhưng tôi không thể đặt ngón tay của tôi vào nó).

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

Trong giải pháp này, tôi tạo biến tham chiếu jQuery. Bằng cách này, chúng tôi có thể gọi những thứ như checkBox.remove() và nó sẽ chỉ tham chiếu hộp kiểm đó (mà không cố gắng tìm ra URL).

Tôi đã sửa đổi nó một chút và xóa các thẻ <br /> và gói mọi thứ trong một <div />. Bằng cách này, bạn chỉ có thể xóa div vùng chứa và tất cả các phần tử sẽ đi.

Ví dụ: http://jsfiddle.net/jonathon/YuyPB/