Question

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

我要克隆的div＆gt;＆gt;＆gt;

<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＆gt;＆gt;＆gt;

的功能

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

Answer 1

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

Answer 2

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

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

＆＃13;

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++;
}

＆＃13;

<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>

＆＃13;

Answer 3

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

用法：

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

Answer 4

使用以下内容过滤您的输入：http://api.jquery.com/filter/并删除过滤后的内容：http://api.jquery.com/remove/

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

4 个答案: