Question

我是jquery的新手，我在谷歌搜索这个脚本并根据我的要求进行自定义，但我遇到了一个问题，他们只给了一个字段脚本，但我尝试了五个输入字段我试图添加5个动态字段使用jquery 所以添加功能是有效的，但当我点击删除链接，它不删除我做错了什么？这是我的代码

 var doc = DocumentApp.openById(newNda.getId());

 var doc = DocumentApp.openById(newNdaId);

 var body = doc.getBody();

 body.replaceText("{{ nda_name }}", ndaData[2]);
 body.replaceText("{{ nda_title }}", ndaData[3]);
 body.replaceText("{{ nda_company }}", ndaData[4]);
 body.replaceText("{{ nda_address }}", ndaData[5]);

谢谢

Answer 1

Plunkr Example

<强>描述您只是将事件处理程序附加到类.remove_field的元素，但您可以使用数字动态添加.remove_field\d IE。

您正在调用$(this).parent('div').remove();，但这仅使用closest查看当前元素上方的1个元素来解决此问题

以下JavaScript解决了这个问题。

<强> JS

$(wrapper).on("click", "[class^=remove_field]", function(e) { //user click on remove text
  e.preventDefault();
  console.log(this);
  $(this).closest('div').remove();
  x--;
})

jQuery文档

parent()

给定一个表示一组DOM元素的jQuery对象，parent（）方法遍历DOM树中每个元素的直接父，并从匹配中构造一个新的jQuery对象元件。

closest()

描述：对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

StackOverflow演示

// Code goes here
var x = 1; //initlal text box count
var max_fields = 10; //maximum input boxes allowed

$(document).ready(function() {
  var wrapper = $(".dynamicinput"); //Fields wrapper
  var add_button = $(".add-more"); //Add button ID

  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div class="col-md-4 col1"><div class="form-group"><label for="exampleInputEmail1"><strong>Name *</strong></label><input type="text" class="form-control textwidth" id="PersonalssDetails_firstname" class="AssignedEmergencyContacts_Name" name="AssignedEmergencyContacts_Name[]"><span><a href="#" class="remove_field">Remove</a></div>');
      $(wrapper).append('<div class="col-md-4 col2"><div class="form-group"><label for="exampleInputEmail1"><strong>Relationship *</strong></label><input type="text" class="form-control textwidth" id="AssignedEmergencyContacts_Relationship" class="AssignedEmergencyContacts_Relationship" name="AssignedEmergencyContacts_Relationship[]"><span><a href="#" class="remove_field1">Remove</a></div>');
      $(wrapper).append('<div class="col-md-4 col3"><div class="form-group"><label for="exampleInputEmail1"><strong>Home Telephone*</strong></label><input type="text" class="form-control textwidth" id="AssignedEmergencyContacts_HomeTelephone" class="AssignedEmergencyContacts_HomeTelephone" name="AssignedEmergencyContacts_HomeTelephone[]"><span><a href="#" class="remove_field2">Remove</a></div>');
      $(wrapper).append('<div class="col-md-4 col4"><div class="form-group"><label for="exampleInputEmail1"><strong>Mobile *</strong></label><input type="text" class="form-control textwidth" id="AssignedEmergencyContacts_Mobile" class="AssignedEmergencyContacts_Mobile" name="AssignedEmergencyContacts_Mobile[]"><span><a href="#" class="remove_field3">Remove</a></div>');
      $(wrapper).append('<div class="col-md-4 col5"><div class="form-group"><label for="exampleInputEmail1"><strong>Work Telephone *</strong></label><input type="text" class="form-control textwidth" id="AssignedEmergencyContacts_WorkTelephone" class="AssignedEmergencyContacts_WorkTelephone" name="AssignedEmergencyContacts_WorkTelephone[]"><span><a href="#" class="remove_field4">Remove</a></div>');
    }
  });

  $(wrapper).on("click", "[class^=remove_field]", function(e) { //user click on remove text
    e.preventDefault();
    console.log($(this).parent('div'));
    $(this).closest('div').remove();
    x--;
  })
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="col-md-4">
    <div class="form-group">
      <label for="exampleInputEmail1">
        <strong>Name *</strong>
      </label>
      <input type="text" class="form-control textwidth" id="PersonalssDetails_firstname" name="AssignedEmergencyContacts_Name[]" />
      <span></span>
    </div>
  </div>
  <div class="col-md-4">
    <div class="form-group">
      <label for="exampleInputEmail1">
        <strong>Relationship *</strong>
      </label>
      <input type="text" class="form-control textwidth" id="AssignedEmergencyContacts_Relationship" name="AssignedEmergencyContacts_Relationship[]" />
      <span></span>
    </div>
  </div>
  <div class="col-md-4">
    <div class="form-group">
      <label for="exampleInputEmail1">
        <strong>Home Telephone* </strong>
      </label>
      <input type="text" class="form-control textwidth" id="AssignedEmergencyContacts_HomeTelephone" name="AssignedEmergencyContacts_HomeTelephone[]" />
      <span></span>
    </div>
  </div>
  <div class="col-md-4">
    <div class="form-group">
      <label for="exampleInputEmail1">
        <strong>Mobile * </strong>
      </label>
      <input type="text" class="form-control textwidth" id="AssignedEmergencyContacts_Mobile" name="AssignedEmergencyContacts_Mobile[]" />
      <span></span>
    </div>
  </div>
  <div class="col-md-4">
    <div class="form-group">
      <label for="exampleInputEmail1">
        <strong>Work Telephone * </strong>
      </label>
      <input type="text" class="form-control textwidth" id="AssignedEmergencyContacts_WorkTelephone" name="AssignedEmergencyContacts_WorkTelephone[]" />
      <span></span>
    </div>
  </div>
  <div id="dynamicinput" class="dynamicinput"></div>
  <input type="button" class="add-more" value="add" />
</body>

</html>

Answer 2

尝试使用jquery最近的函数来查找父元素：

 $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
            e.preventDefault(); 
            $(this).closest('div.col-md-4').remove();  // Just used col-md-4 class as selector, but you can specify more specific one.
            x--;
        })

Answer 3

Fiddle example

将输入包装在div中以便于删除，然后调用last（）。删除它。这是代码的工作示例

<强>代码

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".dynamicinput"); //Fields wrapper


    var x = 1; //initlal text box count
    $(".add_button").click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append("<div class='extra-inputs'>");

            $(wrapper).append('<div class="col-md-4 col1"><div class="form-group"><label for="exampleInputEmail1"><strong>Name *</strong></label><input type="text" class="form-control textwidth" id="PersonalssDetails_firstname" class="AssignedEmergencyContacts_Name" name="AssignedEmergencyContacts_Name[]"><span><a href="#" class="remove_field">Remove</a></div>');
            $(wrapper).append('<div class="col-md-4 col2"><div class="form-group"><label for="exampleInputEmail1"><strong>Relationship *</strong></label><input type="text" class="form-control textwidth" id="AssignedEmergencyContacts_Relationship" class="AssignedEmergencyContacts_Relationship" name="AssignedEmergencyContacts_Relationship[]"><span><a href="#" class="remove_field1">Remove</a></div>');
            $(wrapper).append('<div class="col-md-4 col3"><div class="form-group"><label for="exampleInputEmail1"><strong>Home Telephone*</strong></label><input type="text" class="form-control textwidth" id="AssignedEmergencyContacts_HomeTelephone" class="AssignedEmergencyContacts_HomeTelephone" name="AssignedEmergencyContacts_HomeTelephone[]"><span><a href="#" class="remove_field2">Remove</a></div>');
            $(wrapper).append('<div class="col-md-4 col4"><div class="form-group"><label for="exampleInputEmail1"><strong>Mobile *</strong></label><input type="text" class="form-control textwidth" id="AssignedEmergencyContacts_Mobile" class="AssignedEmergencyContacts_Mobile" name="AssignedEmergencyContacts_Mobile[]"><span><a href="#" class="remove_field3">Remove</a></div>');
            $(wrapper).append('<div class="col-md-4 col5"><div class="form-group"><label for="exampleInputEmail1"><strong>Work Telephone *</strong></label><input type="text" class="form-control textwidth" id="AssignedEmergencyContacts_WorkTelephone" class="AssignedEmergencyContacts_WorkTelephone" name="AssignedEmergencyContacts_WorkTelephone[]"><span><a href="#" class="remove_field4">Remove</a></div>');
            $(wrapper).append("</div>");
         }
    });

    $(".remove_button").on("click", function(e){ //user click on remove text
        $(wrapper).last("extra-inputs").remove()
        x--;
    })
});

删除在jquery中不起作用的功能

3 个答案:

Plunkr Example

jQuery文档

StackOverflow演示