Javascript删除克隆的元素

我有

+

按钮来克隆一些文本字段。我需要删除克隆字段的能力

克隆字段的Javascript:

$(document).ready(function(){
   $( ".add-row" ).click(function(){
      $( "ul.sea-service" ).first().clone().appendTo( ".personal-details1" ).find('input').val("");
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<fieldset class="fieldset-borders">
<legend>Sea Service</legend>
<ul id="personal-details3" class="sea-service">     
    <li>
        <ul class="column">         
            <li>
                <label for="NameOfVessel">Name of Vessel</label>
                <input id="NameOfVessel" type="text" name="NameOfVessel" class="field-style field-split25 align-left" placeholder="Name of Vessel" />   
            </li>
        </ul>
    </li>
    <li>
        <ul class="column">         
            <li>
                <label for="TypeOfVessel">Type of Vessel</label>
                <input id="TypeOfVessel" type="text" name="TypeOfVessel" class="field-style field-split25 align-left" placeholder="Type of Vessel" />   
            </li>           
        </ul>
    </li>

</ul>           
<ul class="personal-details1"></ul>
<button type="button" class="add-row">+</button> 


</fieldset>

HTML:

$(document).ready(function(){
   $( ".add-row" ).click(function(){
      $( "ul.sea-service" ).first().clone().appendTo( ".personal-details1" ).find('input').val("");
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<fieldset class="fieldset-borders">
<legend>Sea Service</legend>
<ul id="personal-details3" class="sea-service">     
    <li>
        <ul class="column">         
            <li>
                <label for="NameOfVessel">Name of Vessel</label>
                <input id="NameOfVessel" type="text" name="NameOfVessel" class="field-style field-split25 align-left" placeholder="Name of Vessel" />   
            </li>
        </ul>
    </li>
    <li>
        <ul class="column">         
            <li>
                <label for="TypeOfVessel">Type of Vessel</label>
                <input id="TypeOfVessel" type="text" name="TypeOfVessel" class="field-style field-split25 align-left" placeholder="Type of Vessel" />   
            </li>           
        </ul>
    </li>

</ul>           
<ul class="personal-details1"></ul>
<button type="button" class="add-row">+</button> 


</fieldset>

海上服务




船名






船型





+ 

通过点击

+

用户可以根据需要克隆任意多个字段，但如果添加到多个克隆中，他应该能够删除它，例如单击

X

我试过到处玩，但没能做到。你有什么想法吗？

您可以将

remove

按钮添加到具有全局类

remove

的每个克隆行，例如：

$( "ul.sea-service" ).first().clone().appendTo( ".personal-details1" )
     .append('<button class="remove">X</button>').find('input').val('');

希望这有帮助

---

$（文档）.ready（函数（）{
$（“.add行”）。单击（函数（）{
$（“ul.sea服务”）.first（）.clone（）.appendTo（“.personal-details1”）.append（'X'）.find（'input'）.val（''）；
});
$（“body”）。在（'click'，'remove'，function（）上{
$（this）.最近（'.sea service'）.remove（）；
});
});

海上服务




船名






船型





+ 
要删除所有克隆字段：


$（函数（）{
$（'.add row'）。单击（函数（e）{
$（“ul.sea服务”）.first（）.clone（）.appendTo（“.personal-details1”）.find（'input'）.val（“”）；
});
$（'.remove row'）。单击（函数（e）{
$（“.personal-details1*”）.remove（）；
});
});

海上服务




船名






船型





+
-
为什么remove（）方法不起作用？请在问题中显示相关的html以及您尝试过的内容。这不是一个代码编写服务，但人们会很乐意帮助编写出不符合预期的代码。您的演示甚至不包括任何用于将事件绑定到以进行删除的控件元素