simple demo

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

我的建议是这样的。

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

假设您的删除按钮的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 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()之类的内容，它只会引用该复选框（而不会尝试计算网址）。

我稍微对其进行了修改并移除了<br />标记并将所有内容包装在<div />中。这样你就可以删除容器div，所有的元素都会去。

示例：http://jsfiddle.net/jonathon/YuyPB/

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

3 个答案:

simple demo