jquery删除动态创建的输入字段

时间:2014-04-07 21:22:29

标签: javascript jquery

所以即时创建项目,你可以在其中创建属于同一个数组的无限数量的输入字段,并且最终通过ajax发布到php处理程序。我设法得到那么远,它的工作一切正常,但我有的问题是,我想让用户删除他/她不想要的输入(即错误创建),它似乎是脚本的核心部分,但我不知道如何处理这个问题。

你可以在这里看到这个项目:

http://jsfiddle.net/7LCzN/

这是代码:

$(function(){
    $("#add").on('click', function () {
        $('body').append('<input type="text" class="ac" name="array[]" />');
    });
});

$(function(){
    $("#post").on('click', function () {

        var myArray = new Array();

        $('.ac').each(function(index, elem) {
            myArray.push($(elem).val());
        });
        $('#result').text(myArray);
    });
});

因此,例如,我创建了4个具有这些值的字段:

5463,8675,2340,1203

我刚刚意识到我不想要价值2340的那个我想要删除它所以我留下了3个字段:

5463,8675,1203

任何有帮助的人,感到高兴和高兴,谢谢你们的伙伴:)。

2 个答案:

答案 0 :(得分:4)

.remove()是一个jQuery函数,可用于从DOM中删除元素。

这是一个很小的例子:

$(".inputToRemove").remove();

以下是a fork of your jsFiddle的工作示例。

答案 1 :(得分:0)

From the docs:

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on()时的页面上。要确保元素存在且可以选择,请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。如果将新HTML注入页面,请在将新HTML放入页面后选择元素并附加事件处理程序。或者,使用委托事件来附加事件处理程序,如下所述。

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素,您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。例如,此元素可以是模型 - 视图 - 控制器设计中视图的容器元素,如果事件处理程序想要监视文档中的所有冒泡事件,则可以是文档。在加载任何其他HTML之前,文档元素在文档的头部可用,因此可以安全地将事件附加到那里而无需等待文档准备就绪。

除了能够处理尚未创建的后代元素上的事件之外,委派事件的另一个优点是,当必须监视许多元素时,它们可能会有更低的开销。在其tbody中包含1,000行的数据表中,此示例将处理程序附加到1,000个元素:

$( "#dataTable tbody tr" ).on( "click", function() {
alert( $( this ).text() );
});

委托事件方法只将一个事件处理程序附加到一个元素tbody,而事件只需要冒出一个级别(从点击的tr到tbody):

$( "#dataTable tbody" ).on( "click", "tr", function() {
alert( $( this ).text() );
});