Question

这是我的代码，我试图创建动态添加/删除文本框。当我点击删除按钮时，一切都被删除了，我应该怎么做（或者请在此代码中指定我的错误。）我想逐个删除..谁能告诉我这个？提前谢谢..

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>dynamic add button</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>              
<script>
    $(document).ready(function () {
        $('<button/>').attr({ 'id': 'add' }).appendTo("body");
        $("#add").text("Add Field");
        $('<div/>').attr({ 'id': 'items' }).appendTo("body");
        $('<div/>').attr({ 'type': 'text', 'name': 'input[]' }).appendTo("#items");

        $("#add").click(function (e) {
            //Append a new row of code to the "#items" div
            var text1 = $('<div/>').attr({ 'id':'div2','type': 'text', 'name': 'input[]' });
           var text2 = $('<input/>').attr({ 'id': 'i1', 'type': 'text', 'name': 'username', 'size': '25' });
           var text3 = $('<button/>').attr({ 'id': 'del' }).text("Delete");
            $("#div2").append(text2, text3);
            $("#items").append(text1);
            $('<br/>').insertAfter(text3);
        });

        //delete function
        $("body").on("click","#del",function (e) {
            $(this).parent("div").remove();
        });       
    });      
   </script>
</head>
<body>

</body>
</html>

Answer 1

jQuery是javascript，但我认为这就是你的意思。这是JSfiddle：http://jsfiddle.net/wfthf2qc/

问题在于您为所有文本字段（#div2）保留了相同的ID，因此当您添加新字段时，jquery会继续追加到第一次出现的#div2。然后当你调用delete函数时，它会删除现在包含所有字段的父div。

在我的代码中，我创建了一个count变量，每次＆＃34;添加＆＃34;单击按钮并使用它来创建唯一的div名称（div1，div2，div3等），因此jquery知道在哪里附加新字段。

我还在$("#items").append(text1);之前移动了$("#div" + count).append(text2, text3);，因为在第一次点击之后将其添加到＆＃34;添加＆＃34;按钮失败，因为它没有要追加的任何div容器。

    $("#items").append(text1);
    $("#div" + count).append(text2, text3);
    $('<br/>').insertAfter(text3);

就我个人而言，我认为可能有一个更优雅的解决方案，但我并不想过多地更改你的代码

在jquery中动态删除文本框而不使用任何javascript

1 个答案: