javascript - 克隆带有嵌入 div 的 div (row-Bootstrap

Question

我的代码可以工作，但只能部分工作。它克隆主 div 和嵌入的 div(使用 Bootstrap 行类)。我想要实现的是在开始时隐藏“删除作者”按钮，但克隆后它将变为事件状态，我将能够删除条目。目前我不知道如何激活删除按钮。
这是一个代码:

<div id="author1" class="clonedInput">
<p id="author" name="author" class="label1">Author</p>
<div class="row">
    <div class="col-md-1 col-sm-6 col-xs-4">
        <input id="title" name="title" type="text" placeholder="" class="input_title textboxstyle" required="">
        <p id="help-block-title" name="help-block-title" for="title" class="help-block-title">Title</p>
    </div>
    <div class="col-md-2">
        <input id="first_name" name="first_name" type="text" placeholder="" class="input_fn textboxstyle" required="">
        <p id="help-block-fn" name="help-block-fn" for="fn" class="help-block-fn">First Name</p>
    </div>
    <div class="col-md-2">
        <input id="last_name" name="last_name" type="text" placeholder="" class="input_ln textboxstyle" required="">
        <p id="help-block-ln" name="help-block-ln" for="ln" class="help-block-ln">Last Name</p>
    </div>
    <div class="col-md-2">
        <input id="email" name="email" type="email" placeholder="abc@example.com" class="input_email textboxstyle" required="">
        <p id="help-block-email" name="help-block-email" for="email" class="help-block-email">Email</p>
    </div>
    <div class="col-md-1 col-sm-1 col-xs-2">
        <input id="checkbox" name="contact" type="checkbox" value="YES">
        <p id="help-block-checkbox" name="help-block-checkbox" for="checkbox" class="help-block-checkbox">Contact</p>
    </div>
    <div class="col-md-2 col-sm-2 col-xs-4">
        <button id="btnAdd" name="btnAdd" type="button" class="btn btn-info" >Add author</button>
    </div>
    <div class="col-md-2 col-sm-2 col-xs-3">
        <button id="btnDel" name="btnDel" type="button" class="btn btn-danger" hidden="true">Remove author</button>
    </div>
   </div>
</div>

JavaScript:

$(function () {
    $('#btnAdd').click(function () {
        var num     = $('.clonedInput').length, // Checks to see how many "duplicatable" input fields we currently have
            newNum  = new Number(num + 1),      // The numeric ID of the new input field being added, increasing by 1 each time
            newElem = $('#author' + num).clone().attr('id', 'author' + newNum).fadeIn('slow'); 

        // create the new element via clone(), and manipulate it's ID using newNum value

    /*  This is where we manipulate the name/id values of the input inside the new, cloned element
        Below are examples of what forms elements you can clone, but not the only ones.
        There are 2 basic structures below: one for an H2, and one for form elements.
        To make more, you can copy the one for form elements and simply update the classes for its label and input.
        Keep in mind that the .val() method is what clears the element when it gets cloned. Radio and checkboxes need .val([]) instead of .val('').
    */
        // <p> - section
        newElem.find('.label1').attr('id', 'author_' + 'ID' + newNum).attr('name', 'author_' + 'ID' + newNum).html('Author' + newNum);

        // Title - select
        newElem.find('.input_title').attr('id', 'title' + 'ID' + newNum).attr('name', 'title' + 'ID' + newNum).val('');

        // First name - text
        newElem.find('.input_fn').attr('id', 'first_name_' + 'ID' + newNum).attr('name', 'first_name_' + 'ID' + newNum).val('');

        // Last name - text
        newElem.find('.input_ln').attr('id', 'last_name_' + 'ID' + newNum).attr('name', 'last_name_' + 'ID' + newNum).val('');

        // Email - text
        newElem.find('.input_email').attr('id', 'email_address_' + 'ID' + newNum).attr('name', 'email_address_' + 'ID' + newNum).val('');

      // Insert the new element after the last "duplicatable" input field
        $('#author' + num).after(newElem);
        $('#ID' + newNum + '_title').focus();

    // Enable the "remove" button. This only shows once you have a duplicated section.
        $('#btnDel').attr('disabled', false);

    // Right now you can only add 4 sections, for a total of 5. Change '5' below to the max number of sections you want to allow.
        if (newNum == 5)
            $('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached 
    });

    $('#btnDel').click(function () {
    // Confirmation dialog box. Works on all desktop browsers and iPhone.
        if (confirm("Are you sure you wish to remove this section? This cannot be undone."))
            {
                var num = $('.clonedInput').length;
                // how many "duplicatable" input fields we currently have
                $('#entry' + num).slideDown('slow', function () {$(this).remove();
                // if only one element remains, disable the "remove" button
                    if (num -1 === 1)
                $('#btnDel').attr('disabled', true);
                // enable the "add" button
                $('#btnAdd').attr('disabled', false).prop('value', "add section");});
            }
        return false; // Removes the last section you added
    });
    // Enable the "add" button
    $('#btnAdd').attr('disabled', false);
    // Disable the "remove" button
    $('#btnDel').attr('disabled', true);
});

参见 JSFiddle:https://jsfiddle.net/qcpo2a47/11/

Answer 1

我试过something,updated fiddle

$(document).on('click','[name="btnDel"]',function() {

if (confirm("Are you sure you wish to remove this section? This cannot be undone.")) {

  var num = $('.clonedInput').index();
  var count=$('.clonedInput').length;



    if (count - 1 === 1)
    {
        $('#btnDel').attr('disabled', true);
    }
      else{
        $(this).parents('.clonedInput').remove();
         $('#btnDel').removeAttr('disabled');
      }





}
return false;   });

我尝试将所有事件附加到 on 处理程序，检查一下它是否适合您。祝你好运。