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

Question

我正在克隆一个带有两个输入字段的 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++;
}

Answer 1

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

Answer 2

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

用法：

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

Answer 3

第二次更新我让你的克隆工作正常了。但是，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>

Answer 4

使用此过滤您的输入：http://api.jquery.com/filter/ 并删除过滤此：http://api.jquery.com/remove/