Question

我在删除克隆元素div时遇到问题。我的代码就像这样

<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

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

    });
});

使用此我无法正确删除克隆的div。

Answer 1

您必须删除要附加克隆元素的#new_item_details元素的最后一个子元素

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

方法略有不同，功能相似。在这里，您可以添加多个元素，并可以根据选择删除其中任何一个元素。

代码：

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

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

2 个答案: