如何在使用remove（）函數jquery后刪除空間

Question

我正在制作提醒應用程序，這里是界面

現在，當我單擊“所有選中的”按鈕時，所有復選框都將刪除。 我為此使用remove()函數，但是在刪除了這些復選框之后，空間仍然保留在那里，當我放置新值時，它就在該空間之后。 我正在嘗試修剪功能，但無法正常工作

我的HTML

  <div class="has-success topSpaceFromRoof">
     <div class="checkbox">

     </div>
  </div>
  <button class="btn btn-default btn-block slight" id="allFinished">
     ALL Checked
  </button>

我的JAVASCRIPT

  $('#allFinished').click(function(){
    $('span').remove();
    $('.checkbox').trim();
  });

我的Java輸入值

 $('<label><span>' +
            '<input type="checkbox" id="checkboxSuccess" value="option1">' +
                 input.val().toUpperCase() +
                    '</span></label><br/>').appendTo('.checkbox');
                     event.preventDefault();

看起來像這樣

Answer 1

嘗試這個，

$('#allFinished').click(function(){
   $('span').remove();
   $('.checkbox').html('');
});

您可以通過使用一些CSS來使用另一個選項，例如，

.checkbox label{
    display:inline-block;
    margin:2px 0;
}

並且無需在dynamically added label's后添加<br/> 。

還有一些jQuery代碼，

$('#allFinished').click(function(){
   $('.checkbox label').remove();
});

Answer 2

請嘗試這個：

使用.empty(); 方法

$('#allFinished').click(function(){
    $('span').empty();
});

參考

演示版

Answer 3

嘗試

$('#allFinished').click(function(){
    $('.checkbox').find('*').remove();
    // $('.checkbox').empty();
 });

Answer 4

這是您需要編寫的代碼

演示

的HTML

<input type=text />
<input type=button value=Submit />
<div class="has-success topSpaceFromRoof">
     <div class="checkbox">

     </div>
  </div>
  <button class="btn btn-default btn-block slight" id="allFinished">
     ALL Checked
  </button>

碼

$(document).ready(function(){
    $('#allFinished').click(function(){
        $('span').remove();
        $('.checkbox').empty();
      });

    $(":button[value=Submit]").click(function(){
        var input=$(":text");
        $('<label><span>' + '<input type="checkbox" id="checkboxSuccess" value="option1">' + input.val().toUpperCase() +                        '</span></label><br/>').appendTo('.checkbox');

    });
});

Answer 5

首先考慮一下您的標記。 嘗試提出一種結構，該結構允許您使用其標簽，輸入本身以及想要與此復選框關聯的任何元素來標識整個復選框。

像這樣：

<div class="checkbox-wrapper">
     <label>
           Blablub
           <input type="checkbox" value="1" />
     </label>
</div>

現在，在您的click事件中，您可以遍歷所有復選框（帶有標識類的元素checkbox-wrapper ），如果選中了整個元素，則將其刪除：

$(document).ready(function(){
    $('#allFinished').on("click", function(){
        $(".checkbox-wrapper").each(function(){           
             if($(this).find("input[type=checkbox]").prop("checked")){
                   $(this).remove();
              }
         });
    });
});

工作演示： https ： //jsfiddle.net/n1o3t3nz/1/