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

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

javascript jquery html css

在jquery中动态删除文本框，而不使用任何javascript,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这是我的代码，我尝试创建动态添加/删除文本框。当我点击“删除”按钮时，所有内容都被删除，我该怎么做（或者请在代码中指定我的错误）。我想逐个删除。。有人能告诉我吗？提前谢谢 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>dynamic add button</title> <script src="http://ajax.googl

这是我的代码，我尝试创建动态添加/删除文本框。当我点击“删除”按钮时，所有内容都被删除，我该怎么做（或者请在代码中指定我的错误）。我想逐个删除。。有人能告诉我吗？提前谢谢

<!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>


动态添加按钮
$（文档）.ready（函数（）{
$（''）.attr（{'id'：'add'}）.appendTo（“body”）；
$（“#添加”）.text（“添加字段”）；
$（''）.attr（{'id'：'items'}）.appendTo（“body”）；
$（''）.attr（{'type'：'text'，'name'：'input[]'}）.appendTo（“#items”）；
$（“#添加”）。单击（函数（e）{
//在“#items”div中追加一行新代码
var text1=$（''）.attr（{'id'：'div2'，'type'：'text'，'name'：'input[]}）；
var text2=$（''）.attr（{'id'：'i1'，'type'：'text'，'name'：'username'，'size'：'25'}）；
var text3=$（''）.attr（{'id'：'del'}）.text（“删除”）；
$（“#div2”）.append（text2，text3）；
$（“#项目”）。追加（文本1）；
$（“
”）。在（text3）之后插入；
});
//删除函数
$（“正文”）。在（“单击”上，“删除”，功能（e）{
$（this.parent（“div”）.remove（）；
});       
});

jQuery是javascript，但我认为这就是你的意思。以下是JSFIDLE：

问题是，所有文本字段（

#div2

）的id都是相同的，因此在追加新字段时，jquery会一直追加到第一个出现的

#div2

。然后，当您调用delete函数时，它将删除父div，该父div现在包含所有字段

在我的代码中，我创建了一个

count

变量，该变量在每次单击“add”按钮时都会不断计数，并使用它来创建唯一的div名称（div1、div2、div3等），因此jquery知道在何处追加新字段

我还移动了

$（“#items”）.append（text1）在<代码>$（“#div”+计数）之前向上。追加（text2，text3）放在后面会导致第一次单击“添加”按钮失败，因为它没有任何要附加的div容器
    $("#items").append(text1);
    $("#div" + count).append(text2, text3);
    $('<br/>').insertAfter(text3);

$（“#项”）.append（text1）；
$（“#div”+count）.append（text2，text3）；
$（“
”）。在（text3）之后插入；

我个人认为可能有一个更优雅的解决方案，但我不想对您的代码做太多更改
jQuery是一个JavaScript库，所以“在jQuery中不使用任何JavaScript”没有太大意义。尝试为文本框分配一个id，并在用户单击时删除按钮。我认为您希望这样