如何在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

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

Answer 2

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

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

我推荐的detach方法，该方法在一个单一的功能将从DOM中删除元素，并将其存储在变量中。

用法：

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