删除重复的字段jquery

Question

我有一个字段可以是多个页面。

首先，当我只有一个添加和一个删除按钮时，我的代码正常工作。当我决定在每个附加字段旁边都有一个删除按钮时，我的jquery函数不再起作用了。

我尝试添加'on'，并将我的代码更改为$ this.parent（）。remove（）但它仍然无效。

这是我的HTML：

   <div class="row" id="ph>
   <span class="section">General Information</span>
       <label> <h3> Project Head </h3> </label>
   </div>


    <div class= "row">
        <div class="col-md-3 col-sm-3 col-xs-12 form-group"></div>
        <div class="col-md-3 col-sm-3 col-xs-12 form-group"></div>
        <button id="addc" type ="button" class ="btn btn-default">Add</button>
   </div>

这是我追加和删除的代码：

$("#ph").append($('<div class="col-md-12 col-sm-12 col-xs-12" id="ne"><div class="row"><div class="col-md-3 col-sm-3 col-xs-12 form-group"> <input class="phname form-control has-feedback-left" name="phname[' + numberIncr + ']" placeholder="Name" type="text"/><span class="fa fa-user form-control-feedback left" aria-hidden="true"></span></div> <div class="col-md-3 col-sm-3 col-xs-12 form-group"><input class="phnum form-control has-feedback-right" name="phnum[' + numberIncr + ']" placeholder="Contact Number" /><span class="fa fa-phone form-control-feedback right" aria-hidden="true"></span></div></div></div>'));

  $("#addc").on('click', function () {
       numberIncr++;
       var temp = $("#ph").append($('<div class="col-md-12 col-sm-12 col-xs-12" id="new"><div class="row"><div class="col-md-3 col-sm-3 col-xs-12 form-group"> <input class="phname form-control has-feedback-left" name="phname[' + numberIncr + ']" placeholder="Name" /><span class="fa fa-user form-control-feedback left" aria-hidden="true"></span></div> <div class="col-md-3 col-sm-3 col-xs-12 form-group"><input class="phnum form-control has-feedback-right" name="phnum[' + numberIncr + ']" placeholder="Contact Number" /><span class="fa fa-phone form-control-feedback right" aria-hidden="true"></span></div><button id="remc" type ="button" class ="btn btn-default">Remove</button></div></div>'));  

      $(".phname").each(function(){
        $(this).rules( "add", {
        required:true,
        lettersonly: true,
      messages: {
        required: 'Enter project head name',
        lettersonly:'Alphabetic characters only'
      }
    });
      });

      $(".phnum").each(function(){
        $(this).rules( "add", {
        required: true,
        maxlength: 11,
        minlength: 11,
      messages: {
        required: 'Enter project head contact number',
        maxlength: 'Invalid contact number',
        minlength: 'Invalid contact number'
      }
    });
      });

    });


 $("#remc").on('click', function () {
        var v= document.getElementById("new");
        v.remove();
  });