使用 jQuery 删除元素 onclick（包括删除按钮本身）

Question

我知道有些问题看起来像我的问题，但在这种情况下，我希望删除按钮也被删除，但我不知道该怎么做。

这是我的问题：

单击追加按钮时，我使用 jQuery 追加 3 个元素。 包括一个删除按钮。

我希望这个移除按钮能够自行移除它和其他两个元素。 计数器应该具有相同的 ID，但我不确定我是否使用 jQuery 正确地做到了这一点。

如何删除三个元素，包括点击删除按钮？

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

假设您的删除按钮的 ID 是#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 2

我的建议是这样的。

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