如何使用jquery刪除克隆的元素

我在刪除克隆的元素div時遇到了問題。我的代碼是這樣的如何使用jquery刪除克隆的元素

<div id="item_details"> 
    <table> 
     <tr> 
      <td><p class="label_text">Name:</p></td> 
      <td><input name="item_name[]" type="text" value="" id="item_name" class="input_text" style="width: 126px;" /></td> 
      <td><p class="label_text">Brand:</p></td> 
      <td><input name="item_brand[]" type="text" value="" id="item_brand" class="input_text" style="width: 126px;" /></td> 
      <td><p class="label_text">Model No:</p></td> 
      <td><input name="model_number[]" type="text" value="" id="model_number" class="input_text" style="width: 126px;" /></td> 
     </tr> 
    </table> 
</div>

這裏有添加股利和刪除按鈕

<div id="new_item_details" class="new_item_details"></div> 

<div style="display:none;" id="removeitem"> 
    <p style="margin:0px 0px 0px 600px;"> 
     <input type="button" name="remove_item" id="remove_item" value="Remove Item" class="cv-form-control button cv-submit"> 
    </p> 
</div> 
<br/> 
<p style="margin:0px 0px 0px 0px;"> 
    <input type="button" name="add_item" id="add_item" value="Add New Item" class="cv-form-control button cv-submit"> 
</p>

和我的jQuery代碼

jQuery(document).ready(function() { 
    jQuery('#add_item').click(function() { 

     var button = $('#item_details').clone(); 
     button.find('input').val(''); 
     jQuery(".new_item_details").append(button); 
     jQuery('#removeitem').show(); 

    }); 

    jQuery('#remove_item').click(function (e) { 

     jQuery(".new_item_details:last").remove(); 
     e.preventDefault(); 

    }); 
});

使用這個我無法刪除克隆格設置正確。

來源

2014-10-17 Krishna38

能否請您解釋一下 '無法刪除克隆DIV正常。'？ – 2014-10-17 10:02:01

您必須刪除#new_item_details元素的最後一個孩子，你是追加克隆元素

jQuery(function ($) { 
 
    $('#add_item').click(function() { 
 
     var button = $('#item_details').clone(); 
 
     button.find('input').val(''); 
 
     button.removeAttr('id');//ID of an element must be uniue 
 
     $(".new_item_details").append(button); 
 
     $('#removeitem').show(); 
 
    }); 
 
    $('#remove_item').click(function (e) { 
 
     $("#new_item_details > div").last().remove(); 
 
     $('#removeitem').toggle(!$("#new_item_details").is(":empty")); 
 
     e.preventDefault(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="item_details"> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <p class="label_text">Name:</p> 
 
     </td> 
 
     <td> 
 
     <input name="item_name[]" type="text" value="" id="item_name" class="input_text" style="width: 126px;" /> 
 
     </td> 
 
     <td> 
 
     <p class="label_text">Brand:</p> 
 
     </td> 
 
     <td> 
 
     <input name="item_brand[]" type="text" value="" id="item_brand" class="input_text" style="width: 126px;" /> 
 
     </td> 
 
     <td> 
 
     <p class="label_text">Model No:</p> 
 
     </td> 
 
     <td> 
 
     <input name="model_number[]" type="text" value="" id="model_number" class="input_text" style="width: 126px;" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div> 
 

 
<div id="new_item_details" class="new_item_details"></div> 
 

 
<div style="display:none;" id="removeitem"> 
 
    <p style="margin:0px 0px 0px 600px;"> 
 
    <input type="button" name="remove_item" id="remove_item" value="Remove Item" class="cv-form-control button cv-submit"> 
 
    </p> 
 
</div> 
 
<br/> 
 
<p style="margin:0px 0px 0px 0px;"> 
 
    <input type="button" name="add_item" id="add_item" value="Add New Item" class="cv-form-control button cv-submit"> 
 
</p>

來源

2014-10-17 10:03:44

非常感謝。它的工作正常。 – Krishna38 2014-10-17 10:13:19

有沒有其他方法可以在單擊添加按鈕時追加總克與克隆？ – Krishna38 2014-10-17 11:34:11

@ user3454479對不起...你是什麼意思 – 2014-10-17 11:36:47

稍微不同的方式，類似的功能。在這裏，您可以添加多個元素，並可以根據選擇刪除其中的任何元素。

代碼：

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.min.js" 
     type="text/javascript"></script> 
</head> 
<body> 
       <div class="input_fields_wrap"> 
           <h3 class="add_field_button"><a href="#">Add More Fields</a></h3> 



           <label for="no_telefon">No.Telefon:</label> <input type="text" id="no_telefon" name="no_telefon" class="required input_field" onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')" required/> 
           <label for="lokasi">Lokasi:</label> <input type="text" id="lokasi" name="lokasi" class="required input_field" required/> 


           </div> 




           </fieldset> 
<script> 
$(document).ready(function() 
{ var max_fields = 25; var wrapper = $(".input_fields_wrap"); var add_button = $(".add_field_button"); 

    var x = 1; //initial text box count 
    $(add_button).click(function(e){ 
     e.preventDefault(); 
     if(x < max_fields){ //max input box allowed 
      x++; //text box increment 
      $(wrapper).append('<div><label for="no_telefon">No.Telefon: <input type="text" name="no_telefon[]" id="no_telefon[]" class="required input_field"><label for="lokasi[]">Lokasi: <input type="text" name="lokasi[]" id="lokasi[]" class="required input_field"><a href="#" class="remove_field">Remove</a></div>'); //add input box 
     } 

     $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent().parent().remove(); x--; 
    }); 
    }); 


}); 

</script> 
</body> 
</html>

來源

2014-10-17 10:21:19 invinciblejai

非常感謝。這一個也很好 – Krishna38 2014-10-17 10:39:17

我的個人資料沒有太多的投票聲譽.. :)抱歉 – Krishna38 2014-10-17 11:23:27

如何使用jquery刪除克隆的元素

回答

相關問題