Question

我创建了一个注册表单，用户可能需要输入最多10个导演详细信息。我想首先只显示一组导演问题，如果需要，用户可以点击＆＃39; +导演＆＃39;添加更多细节。

这会将一个div附加到.director_wrapper（工作正常）。但是，我还想包含一个删除按钮，以防它们向父元素添加太多导演类。

我的代码到目前为止删除了一个div，当＆＃39; -director＆＃39;单击按钮但我无法弄清楚为什么它只删除一个按钮，并且在单击时不会继续删除其他按钮。

＆＃13;

    var director    =  $('.director');
    var dirClone    =  $('.director').html();
    var wrapper     =  $('.director_wrapper');
    var count       =  1;
    var maxField    =  10;
    var removeBtn   =  $('.remove_dir');
    
    
    
   
    $('.add_dir').on('click', function(e){
        e.preventDefault;
        if(count < maxField){
            $(wrapper).append(dirClone);
            count ++;   
            $(removeBtn).removeClass('disabled');
        };
       
    });

  
    $(removeBtn).click('click', function(e){
        e.preventDefault;
        $('.director_wrapper div.director:last').remove();
        count--;
        console.log(count);
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="director_wrapper">
        <div class="row break dir_btn">
            <hr>
            <h2>Director Details</h2>
            <button type="button" class="btn add_dir"><strong>+ director</strong></button>
            <button type="button" class="btn remove_dir disabled"><strong>- director</strong></button>
        </div>
<div class="director">
        <label for="exampleInputPassword1">Director</label>
        <div class="form-inline">
           
        <div class="form-group">
            <input type="email" class="form-control custom-address" id="exampleInputEmail3" placeholder="Line 1">
        </div>
            <div class="form-group">
            <input type="email" class="form-control custom-address" id="exampleInputEmail3" placeholder="Line 2">
        </div>
        <div class="form-group">
           
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Line 3">
        </div>
        <div class="form-group">
            
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="City">
        </div>
        <div class="form-group">
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Country">
        </div>
        <div class="form-group">
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Postcode or equivalent">
        </div>
        <div class="form-group">
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Phone Number">
        </div>
        <div class="form-group">
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Email">
        </div>
        
  
        </div>
        
</div> <!-- close director div -->
    
</div> <!-- close director_wrapper div -->

＆＃13;

Answer 1

问题是你的第二行：$('.director').html();。 .html()只获取元素的内部 HTML。有一个名为outerHTML的DOM属性，您可以使用它来获取正确的HTML

    var director    =  $('.director');
    var dirClone    =  $('.director').prop('outerHTML');
    var wrapper     =  $('.director_wrapper');
    var count       =  1;
    var maxField    =  10;
    var removeBtn   =  $('.remove_dir');
    
    
    
   
    $('.add_dir').on('click', function(e){
        e.preventDefault;
        if(count < maxField){
            $(wrapper).append(dirClone);
            count ++;   
            $(removeBtn).removeClass('disabled');
        };
       
    });

  
    $(removeBtn).click('click', function(e){
        e.preventDefault;
        $('.director_wrapper div.director:last').remove();
        count--;
        console.log(count);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="director_wrapper">
        <div class="row break dir_btn">
            <hr>
            <h2>Director Details</h2>
            <button type="button" class="btn add_dir"><strong>+ director</strong></button>
            <button type="button" class="btn remove_dir disabled"><strong>- director</strong></button>
        </div>
<div class="director">
        <label for="exampleInputPassword1">Director</label>
        <div class="form-inline">
           
        <div class="form-group">
            <input type="email" class="form-control custom-address" id="exampleInputEmail3" placeholder="Line 1">
        </div>
            <div class="form-group">
            <input type="email" class="form-control custom-address" id="exampleInputEmail3" placeholder="Line 2">
        </div>
        <div class="form-group">
           
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Line 3">
        </div>
        <div class="form-group">
            
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="City">
        </div>
        <div class="form-group">
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Country">
        </div>
        <div class="form-group">
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Postcode or equivalent">
        </div>
        <div class="form-group">
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Phone Number">
        </div>
        <div class="form-group">
            <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Email">
        </div>
        
  
        </div>
        
</div> <!-- close director div -->
    
</div> <!-- close director_wrapper div -->

jQuery按顺序删除附加的div元素

1 个答案: