加号图标动态文本框未在 jquery 中生成

Question

我想要的是，每当单击加号图标时，我都想生成一个新的input type = text。所以我写了下面的代码。

$('#dvDVRdata1 .add').on('click', function() {
  addDynamicTextbox();
});

function addDynamicTextbox() {
  //alert('icon clicked');
  var numItems = $('#dvDVRdata1').length;
  alert(numItems);
  if (numItems != 5) {
    var lastfieldsid = $('#dvDVRdata1 input').last().attr('id');
    if ($('#' + lastfieldsid).val() != "") {
      var id = parseInt(lastfieldsid.substr(13, lastfieldsid.length));
      var tr2 = $("#dvDVRdata1" + id + "");
      var tr = "<tr id='dvDVRdata1" + (id + 1) + "'><td><div class=''><div class=''><div class='' id='dvDVRdata1" + (id + 1) + "'><label>DVR Address</label><span><input type='text'  value='' name='nmDVRAddress" + "' id='txtDVRAddress" + (id + 1) + "'/></span></div></span></div></span></div></div><div class='minus'><i class='fa fa-times' aria-hidden='true'></i></div></td></tr>"
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6" id="dvDVRdata1">
  <div class="form-group">
    <label for="">DVR Address </label>
    <input type="text" class="form-control" id="txtDVRAddress1" runat="server" />
  </div>
  <div class="add">
    <i class="fa fa-plus" aria-hidden="true"></i>
  </div>
</div>

Answer 1

假设您要在 div#dvDVRdata1 中添加新的输入字段。您需要将 append 的 HTML 内容添加到 div，如下所示：

$('#dvDVRdata1').append(tr);

Answer 2

您的代码中有几个问题。

1. 使用slice(-1) 获取 id 的最后一个字符。它使用硬编码 substr(13,... 删除了您的依赖项，您可以使用该值将新生成的 ID 增加 +1 。
2. 使用$('.form-group').find('input').length < 5检查input的长度，检查form-group类中输入的长度，用户只能添加5个输入。
3. 最后不要忘记使用 $('.form-group').append(tr); 将生成的元素附加到 form-group 类。
4. 我还添加示例以使用minus 类删除添加的tr。

   例子：

   $('#dvDVRdata1 .add').on('click', function() {
     addDynamicTextbox();
   });
   
   function addDynamicTextbox() {
     //alert('icon clicked');
     var numItems = $('#dvDVRdata1').length;
   
     if ($('.form-group').find('input').length < 5) {
       var lastfieldsid = $('#dvDVRdata1 input').last().attr('id');
       if ($('#' + lastfieldsid).val() != "") {
         var id = parseInt(lastfieldsid.slice(-1));
         var tr2 = $("#dvDVRdata1" + id + "");
         var tr = "<tr id='dvDVRdata" + (id + 1) + "'><td><div class=''><div class=''><div class='' id='dvDVRdata" + (id + 1) + "'><label>DVR Address</label><span><input type='text'  value='' name='nmDVRAddress" + "' id='txtDVRAddress" + (id + 1) + "'/></span></div></span></div></span></div></div><div class='minus'><i class='fa fa-times' aria-hidden='true'>Remove</i></div></td></tr>";
   
       }
       $('#yourid').append(tr);
     } else {
       alert("warning........")
     }
   }
   $(document).on('click', 'div.minus', function() {
     $(this).closest('tr').remove();
   });

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <div class="col-sm-6" id="dvDVRdata1">
     <div class="form-group" id="yourid">
       <label for="">DVR Address </label>
       <input type="text" class="form-control" id="txtDVRAddress1" runat="server" />
     </div>
     <div class="add">
       <i class="fa fa-plus" aria-hidden="true">icon</i>
     </div>
   </div>

Answer 3

问题是您需要 append 元素，您在问题的代码中没有这样做。

至于删除，您还没有在您的问题中完成。这是添加和删除的示例。

$(document).ready(function(){
  $('.add').on('click', function () {
      addDynamicTextbox();
  });

  $('.del').click(function (e) {
      deleteDynamicTextbox(e);
  });
});

function addDynamicTextbox() {
    //alert('icon clicked');
    var numItems = $('.form-group .dvDVRdata').length;
    alert(numItems);
    if (numItems != 5) {
        var formGroup = $('.form-group');
        var elem = `<div class="dvDVRdata" id="dvDVRdata${numItems+1}">
                                        <label for="txtDVRAddress${numItems+1}">DVR Address </label>
                                        <input type="text" class="form-control" id="txtDVRAddress${numItems+1}" runat="server" />
                                </div>`;
        formGroup.append(elem);
    }
}

function deleteDynamicTextbox() {
    //alert('icon clicked');
    var numItems = $('.form-group .dvDVRdata').length;
    alert(numItems);
    if (numItems > 1) {
        $(`#dvDVRdata${numItems}`).remove();
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js" integrity="sha512-rpLlll167T5LJHwp0waJCh3ZRf7pO6IT1+LZOhAyP6phAirwchClbTZV3iqL3BMrVxIYRbzGTpli4rfxsCK6Vw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="col-sm-6" id="dvDVRdata1">
  <div class="form-group">
    <div class="dvDVRdata" id="dvDVRdata1">
      <label for="">DVR Address </label>
      <input type="text" class="form-control" id="txtDVRAddress1" />
      </div>
  </div>
</div>

  <div class="add">
     <i class="fa fa-plus" aria-hidden="true"></i>
  </div>
  

  <div class="del">
     <i class="fa fa-minus" aria-hidden="true"></i>
  </div>