Question

我有以下代码动态添加文本框。

var counter = 1;
$("addBtn").click(function(){
    if (counter > 5) {
        alert('Only 5 text boxes allowed');
        return false;
    }

    var newTextBoxDiv = $(document.createElement('div')).attr('id', 'TextBoxDiv' + counter);
    newTextBoxDiv.html('<input class="form-textbox" type="text" name="textbox[]" id="txt_brand_' + counter + '" value="">');

    newTextBoxDiv.insertAfter("#div5");

    counter++;
});

下面的代码逐个删除文本框

$('removeBtn').click(function() {
    if (counter==1) {
        alert("No more textboxes to remove");
        return false;
    }
    counter--;
    $("#TextBoxDiv" + counter).remove();
});

上面的代码工作正常，但我需要一次删除所有添加的文本框而不是一个一个。可能吗？请帮忙

由于

Answer 1

当然可以，例如为他们添加一个css类，然后删除所有类：

修改此行以添加自定义css-class：

newTextBoxDiv.html('<input class="form-textbox my-dynamic-textbox" type="text" name="textbox[]" id="txt_brand_' + counter + '" value="">');

然后只删除该类的所有内容：

$('removeBtn').click(function() {     
    $(".my-dynamic-textbox").remove();
});

Answer 2

使用IDs您可以使用：

$("[id^='TextBoxDiv']").remove();

Answer 3

添加一个额外的类以指示它是动态添加的，然后使用它来删除

var counter = 1;
$("addBtn").click(function () {
    if (counter > 5) {
        alert('Only 5 text boxes allowed');
        return false;
    }

    var newTextBoxDiv = $('<div />', {
        id: 'TextBoxDiv' + counter,
        'class': 'dynamic-text'
    });
    newTextBoxDiv.html('<input class="form-textbox" type="text" name="textbox[]" id="txt_brand_' + counter + '" value="">');

    newTextBoxDiv.insertAfter("#div5");

    counter++;
});

然后

$('.dynamic-text').remove()

Answer 4

将相同的类添加到动态添加的元素say class='dynamic_element'。现在，当您单击删除按钮时，删除具有以下类的元素

$('.dynamic_element').remove();

Jquery：是否可以一起删除所有动态添加的文本框

4 个答案: