Javascript刪除克隆元素

Question

我有+按鈕來克隆一些文本字段。我需要刪除克隆的字段的能力。

Javascript功能來克隆領域：

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

HTML：

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

有JS Fiddle，由clicnking +用戶，因爲他需要可以克隆儘可能多的領域，但如果加入許多克隆他應該有能力刪除它，例如通過點擊X。

我試過玩過，但無法實現它。你有什麼想法嗎？

Answer 1

Working Fiddle

你可以添加remove按鈕，每一個克隆行與全球一流remove例如：

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

然後附上click事件刪除父.sea-service到類.remove和：

$("body").on('click', '.remove', function(){ 
    $(this).closest('.sea-service').remove(); 
}); 

希望這有助於。

---

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

 
    }); 
 

 
    $("body").on('click', '.remove', function(){ 
 
    $(this).closest('.sea-service').remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <fieldset class="fieldset-borders"> 
 
    <legend>Sea Service</legend> 
 
    <ul id="personal-details3" class="sea-service"> \t \t 
 
     <li> 
 
     <ul class="column"> \t \t \t 
 
      <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"> \t \t \t 
 
      <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" /> \t 
 

 
      </li> \t \t \t 
 
     </ul> 
 
     </li> 
 

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

 

 
    </fieldset>

Answer 2

要刪除所有克隆領域：

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

<script src="http://code.jquery.com/jquery-1.11.3.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> 
 
     <button type="button" class="remove-row">-</button> 
 

 

 
    </fieldset>