如何在 jQuery 中克隆后删除输入字段

how to remove a input field after cloning in jquery

本文关键字：删除 输入 字段 jQuery      更新时间：2023-09-26

我正在克隆一个带有两个输入字段的div，其中一个是隐藏字段。现在我想在追加之前从克隆的div 中删除隐藏字段。我不知道该怎么做。我已经为它做了一些工作，但没有适合我的工作的代码，或者可能是我没有正确理解。任何人都可以帮我解决这个问题吗?!!!这是我下面的代码：：

我想克隆>>>的div

<div class="col-xs-4 wcmEdit" id="wcmEdit">
                <div class="form-group">
                    <label for="participatedWcMemberName"><g:message code="so" default="Member Name" /></label>
                    <g:textField id="participatedWcMemberName${i}" name="participatedWcMemberName${i}" value="${wcMembers?.participatedWcMemberName}" class="form-control" required=""/>
                    <g:hiddenField name="participatedWcMemberId${i}" value="${wcMembers?.id}"/>
                    <a onclick="addAnotherWcMemberEdit()">Add More</a> ||
                    <a onclick="removeThisMember()">Remove</a>
                </div>
            </div>

我克隆div>>>的功能

function addAnotherWcMemberEdit(){
    var memberSign = 'participatedWcMemberName' + wcMemberCounterEdit
    $('#wcmEdit').clone().find('input').attr({
        value: '',
        id: memberSign, 
        name: memberSign
    }).end().appendTo('#wcMember');
    wcMemberCounterEdit++;
}

您可以声明一个变量并使用它来保存源输入的克隆。然后 .remove（） 源输入。由于您使用 .clone（），它会创建深度克隆，因此变量在删除源后仍将保存克隆。然后，您可以 variable.appendTo（） 或 variable.prependTo（）。

我推荐 detach 方法，该方法在单个函数中将从 dom 中删除元素并将其存储在变量中。

用法：

  var storedElement = $('#my-element').detach();

第二次更新 我让你的克隆工作了。但是，jQuery clone方法无法按预期工作，因为克隆的div 包含非常规的 html 元素/标签，例如 <g:textField> 和 <g:hiddenField> 。因此，在完成addAnotherWcMemberEdit后，克隆的元素如下所示：

<div class="col-xs-4 wcmEdit" id="wcmEdit_1">
    <div class="form-group">
      <label for="participatedWcMemberName">
        <g:message code="so" default="Member Name">
      </g:message></label>
      <g:textfield id="participatedWcMemberName1" name="participatedWcMemberName1" value="" class="form-control" required="">
          <g:hiddenfield name="participatedWcMemberId" value="wcMemberid">
              <a onclick="addAnotherWcMemberEdit()">Add More</a> ||
              <a onclick="removeThisMember()">Remove</a>
          </g:hiddenfield>
      </g:textfield>
   </div>

在这个奇怪的克隆结果之后，我无法删除隐藏的元素。对于用户来说，最终结果在浏览器上看起来没有任何不同。我也无法在新位置删除隐藏元素。

var wcMemberCounterEdit = 1;
function addAnotherWcMemberEdit() {
  var memberSign = 'participatedWcMemberName' + wcMemberCounterEdit
  //clone
  $clonedDiv = $('#wcmEdit').clone();
  //new id for the cloned div, to make the id unique
  $clonedDiv.attr("id", "wcmEdit_" + wcMemberCounterEdit);
  //find textField (second child of class .form-group,
  //which I assume is your intended input)
  //and set attributes
  $clonedDiv.find('.form-group > :nth-child(2)').attr({
    value: '',
    id: memberSign,
    name: memberSign
  });
  //remove hidden field. This doesn't work (!) because the cloning
  // doesn't work as expected --> hidden field is not third element
  // following the cloning
  $clonedDiv.find('.form-group > :nth-child(3)').remove();
  //append cloned div
  $('#wcMember').append($clonedDiv);
  wcMemberCounterEdit++;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="wcMember">
  <div class="col-xs-4 wcmEdit" id="wcmEdit">
    <div class="form-group">
      <label for="participatedWcMemberName">
        <g:message code="so" default="Member Name" />
      </label>
      <g:textField id="participatedWcMemberName${i}" name="participatedWcMemberName${i}" value="${wcMembers?.participatedWcMemberName}" class="form-control" required="" />
      <g:hiddenField name="participatedWcMemberId${i}" value="${wcMembers?.id}" />
      <a onclick="addAnotherWcMemberEdit()">Add More</a> ||
      <a onclick="removeThisMember()">Remove</a>
    </div>
  </div>
</div>

使用 this：http：//

api.jquery.com/filter/过滤输入，并删除过滤后的内容： http://api.jquery.com/remove/

相关文章：