Question

我用来创建功能的代码在

下面

 <!DOCTYPE html>
<html>
<head>
<title>Dynamically Add and Delete Textbox using jQuery</title>
<meta charset='utf-8'>
<style>
@font-face{font-family: Lobster;src: url('Lobster.otf');}
body{width:750px;margin:0px auto;}
.space{margin-bottom: 4px;}
.txt{width:250px;border:1px solid #00BB64; height:30px;border-radius:3px;font-family: Lobster;font-size:20px;color:#00BB64;}
p{font-family: Lobster;font-size:35px; text-align:center;}
.but{width:250px;background:#00BB64;border:1px solid #00BB64;height:40px;border-radius:3px;color:white;margin-top:10px;}
</style>
<script src='js/jquery-1.9.1.min.js'></script>
</head>
<body>
<p>Dynamically Add and Delete Textbox using jQuery</p>
<div id="advice" style="width: 400px; height: auto;">
  <form>
  <div id="button_pro">
    <div class='space' id='input_1'>
        <table>
        <tr>
        <th> Name </th>
        <th> Description </th>
        <th> section </th>
        </tr>
        <tr>
        <td><input id="input_1" type="text" name="val[]" class='left txt'/></td>
        <td><input id="input_1" type="text" name="val[]" class='left txt'/></td>
        <td><input id="input_1" type="text" name="val[]" class='left txt'/></td>

        <td><img class="add right" src="images/add.png" /></td>
        </tr>
        </table>


    </div>
   </div>   
    <input type='submit' value='Submit' class='but'/>
 </form>    
</div>

<script>
$('document').ready(function(){
    var id=2,txt_box;
    $('#button_pro').on('click','.add',function(){
          $(this).remove();
          txt_box='<div class="space" id="input_'+id+'" ><table><tr><th>  Name </th><th> Description </th><th> Section </th></tr>   <tr><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><img class="remove" src="images/remove.png" /></td><td><img class="add right" src="images/add.png" /></td></tr></table></div>';
          $("#button_pro").append(txt_box);
          id++;
    });

    $('#button_pro').on('click','.remove',function(){
            var parent=$(this).parent().prev().attr("id");
            var parent_im=$(this).parent().attr("id");
            $("#"+parent_im).slideUp('medium',function(){
                $("#"+parent_im).remove();
                if($('.add').length<1){
                    $("#"+parent).append('<img src="images/add.png" class="add right"/>');
                }
            });
            });


});
</script>
</body>

</html>

这里的问题是加号图像功能正常，因为删除文本框的负图像不起作用。

当我从文本框变量中删除标记并在文本框变量中的标记之前添加它时，它可以正常工作。

我不确定标签更改为何会影响删除功能的功能

Answer 1

我修改了你的代码并使其更简单。您可以使用最近的功能来简化操作。

这是小提琴：http://jsfiddle.net/swaprks/4b5wdev2/

CSS：

@font-face{font-family: Lobster;src: url('Lobster.otf');}
body{width:750px;margin:0px auto;}
.space{margin-bottom: 4px;}
.txt{width:250px;border:1px solid #00BB64; height:30px;border-radius:3px;font-family: Lobster;font-size:20px;color:#00BB64;}
p{font-family: Lobster;font-size:35px; text-align:center;}
.but{width:250px;background:#00BB64;border:1px solid #00BB64;height:40px;border-radius:3px;color:white;margin-top:10px;}

JS：

$('document').ready(function(){
    var id=2,txt_box;
    $('#button_pro').on('click','.add',function(){
          $(this).remove();
          txt_box='<div class="space" id="input_'+id+'" ><table><tr><th>  Name </th><th> Description </th><th> Section </th></tr>   <tr><td><input id="name_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="desc_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="section_'+id+'" type="text" name="val[]" class="left txt"/></td><td><img class="remove" src="images/remove.png" /></td><td class="addTD"><img class="add right" src="images/add.png" /></td></tr></table></div>';
          $("#button_pro").append(txt_box);
          id++;
    });

    $('#button_pro').on('click','.remove',function(){

            var parent = $(this).closest(".space");
           var parentPrev = $(parent).prev().find(".addTD");

            $(parent).slideUp('medium',function(){
                $(parent).remove();
                if($('.add').length < 1){
                    $(parentPrev).append('<img src="images/add.png" class="add right"/>');
                }
            });
            });


});

HTML：

<p>Dynamically Add and Delete Textbox using jQuery</p>
<div id="advice" style="width: 400px; height: auto;">
  <form>
  <div id="button_pro">
    <div class='space' id='input_1'>
        <table>
        <tr>
        <th> Name </th>
        <th> Description </th>
        <th> section </th>
        </tr>
        <tr>
        <td><input id="name_1" type="text" name="val[]" class='left txt'/></td>
        <td><input id="desc_1" type="text" name="val[]" class='left txt'/></td>
        <td><input id="section_1" type="text" name="val[]" class='left txt'/></td>

        <td class="addTD"><img class="add right" src="images/add.png" /></td>
        </tr>
        </table>


    </div>
   </div>   
    <input type='submit' value='Submit' class='but'/>
 </form>    
</div>

Answer 2

见下面的演示

http://jsfiddle.net/y7g9no9L/

只需在.remove点击功能

中添加以下行

$('#button_pro').on('click','.remove',function(){
            $(this).parent().closest(".space").remove();
            });

Answer 3

您可以对标签使用data-*属性，并确保不会重复ID。最好的方法是在数据 - * attrs中使用id，以便它们可以有欺骗。

＆＃13;

$('document').ready(function(){
    
  $('#button_pro').on('click','.add',function(){
    var id=$('#button_pro > div.space').data('id')*1+1;
    $(this).remove();
    var txt_box='<div class="space" data-id="'+id+'" id="input_'+id+'" ><table><tr><th>  Name </th><th> Description </th><th> Section </th></tr>   <tr><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><img class="remove" src="images/remove.png" /></td><td><img class="add right" src="images/add.png" /></td></tr></table></div>';
    $("#button_pro").append(txt_box);

  });

  $('#button_pro').on('click','.remove',function(){
    var id = $(this).closest('div.space').prev();
    $(this).closest('#button_pro > div.space').slideUp('medium',function(){
      if($('div.space').length>1){
        if(this == $('#button_pro > div.space:last')[0])
          id.find('td').last().append('<img src="images/add.png" class="add right"/>');
        $(this).remove();
      }
    });
  });

});

＆＃13;

@font-face{font-family: Lobster;src: url('Lobster.otf');}
body{width:750px;margin:0px auto;}
.space{margin-bottom: 4px;}
.txt{width:250px;border:1px solid #00BB64; height:30px;border-radius:3px;font-family: Lobster;font-size:20px;color:#00BB64;}
p{font-family: Lobster;font-size:35px; text-align:center;}
.but{width:250px;background:#00BB64;border:1px solid #00BB64;height:40px;border-radius:3px;color:white;margin-top:10px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Dynamically Add and Delete Textbox using jQuery</p>
<div id="advice" style="width: 400px; height: auto;">
  <form>
    <div id="button_pro">
      <div class='space' data-id='1'>
        <table>
          <tr>
            <th> Name </th>
            <th> Description </th>
            <th> section </th>
          </tr>
          <tr>
            <td><input id="input_1" type="text" name="val[]" class='left txt'/></td>
            <td><input id="input_1" type="text" name="val[]" class='left txt'/></td>
            <td><input id="input_1" type="text" name="val[]" class='left txt'/></td>
            <td><img class="add right" src="images/add.png" /></td>
          </tr>
        </table>
      </div>
    </div>   
    <input type='submit' value='Submit' class='but'/>
  </form>    
</div>

＆＃13;

Answer 4

创建index.html并添加jQuery库，文本框和图像（添加）。

HTML：

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Textbox addition and Deletion using jQuery</title>
<meta charset='utf-8'>
<script src='js/jquery-1.9.1.min.js'></script>
</head>
<body>
<p>Dynamically Add and Delete Textbox using jQuery</p>
<div id="advice" style="width: 400px; height: auto;margin:0px auto;">
  <form>
  <div id="button_pro">
    <div class='space' id='input_1'>
        <input id="input_1" type="text" name="val[]" class='left txt'/>
        <img src="images/add.png" />
    </div>
   </div>    
    <input type='submit' value='Kiss Me!' class='but'/>
 </form>    
</div>
</body>

现在在head部分添加以下css样式以添加美感。

<style>
@font-face{font-family: Lobster;src: url('Lobster.otf');}
body{width:750px;margin:0px auto;}
.space{margin-bottom: 4px;}
.txt{width:250px;border:1px solid #00BB64; height:30px;border-radius:3px;font-family: Lobster;font-size:20px;color:#00BB64;}
p{font-family: Lobster;font-size:35px; text-align:center;}
.but{width:250px;background:#00BB64;border:1px solid #00BB64;height:40px;border-radius:3px;color:white;margin-top:10px;}
</style>

现在我们加入了jQuery派对。第一项任务是当我们点击加号图像时，它会动态地将文本框添加到表单中。

var id=2,txt_box;
    $('#button_pro').on('click','.add',function(){
          $(this).remove();
          txt_box='<div class="space" id="input_'+id+'" ><input type="text" name="val[]" class="left txt"/><img src="images/remove.png" class="remove"/><img class="add right" src="images/add.png" /></div>';
          $("#button_pro").append(txt_box);
          id++;
    });

See the Demo

DEMO 1

动态添加和删除文本框

4 个答案: