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 +用户可以根据需要克隆多个字段，但如果添加到多个克隆，他应该有能力删除它，例如点击{{1} }。

我试图玩，但无法实现它。你有什么想法吗？

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

Answer 2

删除所有克隆字段：

＆＃13;

$(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();
  });
});

＆＃13;

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

＆＃13;

Javascript删除克隆的元素

2 个答案: