jQuery删除并添加输入框

Question

    $(document).ready(function() {
        var n=1;

        $("#add").click(function(){
            if(n<8){
            $("#form").append("
                <input type='text' name='input_" + (n++) +"'/>
                <input type='button' id='remove_" + (n++) +"' value='REMOVE'/>");
            }
        });     
    });

我有一个使用Jquery添加的输入框。

如何删除特定的输入框。

http://jsfiddle.net/JvW3L/

- user2178521

---

你能分享一下你尝试过的代码吗？ - undefined

什么应该触发移除操作？ - undefined

希望你知道n++是什么意思。因为输入框中的n值与删除按钮不同。 - undefined

Answer 1

假设要点击一个具有"id"为'deleteInput'的元素来触发删除操作：

$('#deleteInput').click(function(e){
    // in case it's an element with a default action:
    e.preventDefault();
    $('#form input').last().remove();
    n--;
});

以上代码将简单地删除最后一个添加的 input 元素，并将 n 变量减一。

如果您想删除除最后一个之外的特定 input，请执行以下操作：

$('.deleteInput').click(function(e){
    e.preventDefault();
    $(this).prev('input').remove();
});

这假设元素中带有一个类为deleteInput的元素将立即跟在要删除的input后面。在这种情况下，我将保留n不变，并让您找到一些方法来重新使用被清空的“插槽”来重新创建input（因为简单的递减可能会导致两个元素无效地共享相同的id）。

参考资料：

• click()。
• event.preventDefault()。
• last()。
• prev()。
• remove()。

- David Thomas

Answer 2

试试这个：

$("#form").on("click", "input[id^='remove_']", function () {
    $(this).prev(':text').remove();
    $(this).remove();
    n--;
});

由于 inputs 是动态添加的，因此需要使用事件委托来注册事件处理程序。 实际演示

- palaѕн

Answer 3

使用类来为您的按钮添加样式，如下所示 -

$("#form").append("<input type='text' name='input_" + (n++) +"'/><input type='button' class='remove' value='REMOVE'/>");

并且要移除输入框和按钮 -

$('form').on('click','.remove',function(){
   $(this).prev('input').remove();
   $(this).remove();
   n--;
});

演示 ----> http://jsfiddle.net/JvW3L/4/

- Adil Shaikh

Answer 4

这个怎么样？

$("#remove_").remove();

（假设您想要删除具有id='remove_'的第二个输入）

- jh314

Answer 5

你需要使用jQuery选择器来选择一个元素。选择了元素之后，你可以进行各种操作，其中之一就是将其移除。

你可以通过名称、属性、类型、在DOM中的位置或者id来选择元素。

在你的情况下，最简单的方法是针对id为"input_3"的输入框：

$("#input_3").remove();

- Kamil T