如何在使用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();
  });

输入值的JAVASCRIPT

 $('<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;
}

无需在<br/>之后添加dynamically added label's。

和一些jquery代码一样，

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

Answer 2

请尝试：

使用.empty();方法

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

Reference

Demo

Answer 3

尝试

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

Answer 4

这是您需要编码的内容

DEMO

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

<强> CODE

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

现在，在您的点击事件中，您可以遍历所有复选框（带有您的标识类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/