javascript - 如何在jquery中添加一个或多个克隆

Question

我是 jquery 新手，我正在使用 laravel 框架。我想在用户填写第一门类(class)后添加类(class)。

当用户单击“添加更多类(class)”按钮时，它将创建新的克隆，确保“添加更多类(class)”按钮将从第一个类(class)中删除并设置为第二个类(class)，同样适用于新创建的类(class)，并且“添加更多”按钮应从第二个类(class)中删除类(class)并设置为第三类(class)。我有 hrml 代码。

enter code here
<div class="col-md-12 col-sm-12 col-xs-12">
           <div class="row">
              <div class="heading">
                <h4>Courses Offred <button type="button" class="close" data-dismiss="modal"  aria-hidden="true" style="display:none">&times;</button></h4>
                 <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Course  Title</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div> 
                  <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Fees</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div> 
                  <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Web Link</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div> 
                  <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Course Detail</span>
                         <textarea  class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Course Detail"></textarea>
                     </div>
                 </div> 
                  <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Course Type</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div>  
                 <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Course Duration</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div>
                 <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Location</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div>
                 <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Entry Requirement</span>
                         <input type="text" class="form-control txtfield m-tb-10" placeholder="Enter value">
                     </div>
                 </div>
                 <div class="col-md-12 col-sm-12 col-xs-12">
                     <div class="property-type">
                        <span class="property-class">Certificates</span>
                         <textarea  class="form-control txtfield m-tb-10 txtarea" rows="5" placeholder="Add Your Certificates"></textarea>
                     </div>
                 </div>
                 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="row">
                       <div class="add-more-class ">
                          <div class="btn-save">
                            <button class="btn btn-info">Add More Course</button>
                          </div>
                       </div>
                    </div>
                 </div>                       
              </div>
           </div>
        </div>

在标题标签中有关闭按钮。它应该在第二门类(class)中可见，并使验证用户不能添加超过五个类(class)。谁能帮我。预先感谢:)

Answer 1

我认为这是您想要的脚本:

更新的脚本:

var courseCtr = 1;
console.log('course counter: ' + courseCtr);
$(document).on('click', 'button.btn', function() {

    if (courseCtr === 5) {
        return false;
    }

    var $row = $(this).closest('div.heading').parent();
    var $parent = $row.parent();
    var $clone = $row.clone();
    if ($clone.find('.heading .close').length === 1) {
        $clone.find('.heading .close').remove();
    }
    $clone.find('.heading h4').after('<button class="close">X</button>')
    $clone.find(':input').val('');
    $clone.find('textarea').val('');
    $row.find('.heading div').last().remove();

  //  $clone.find('.heading h4').remove();

    $parent.append($clone);
    courseCtr++;
    console.log('course counter: ' + courseCtr);
})

$(document).on('click', '.close', function(){
    var $buttonClone = $(this).parent().find('div').last().clone();
    $(this).parents('.row').prev().find('div.heading').append($buttonClone);
    $(this).parents('.row').remove();
    courseCtr--;
    console.log('course counter: ' + courseCtr);
})

更新的 fiddle :SEE FIDDLE HERE