Javascript remove cloned elements

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>