jQuery .remove（）之后清除div中的空间

Question

Checkboxes are added to div1 dynamically:

$.each(json, function(idx, obj) {

$("#tbl1").append('<input type="checkbox" id='+obj.firstId+' onclick=nextPopulate('+obj.firstId+'); >'); }

On selecting these, checkboxes are added to div2 dynamically:

$.each(json, function(idx, obj) {

$("#tbl2").append('<label id="chk'+firstId+'"><input type="checkbox" id="'+firstId+'-'+secondId+'" ></label>'); }

On unchecking the checkbox in div1, the corresponding checkboxes(lable element) created in div2 are removed :

if(!($('#'+firstId).is(':checked')))

    $("[id^=chk"+firstId+"]").remove();

Lable content is removed.But, the space is still there.If i again select in div1, checkbox in div2 will be created only after this empty space.

How can i remove the space also while removing the content. Will refreshing/reloading the div after removing will work ?

If yes, then how is the syntax. I don't want to hit the database/call the onclick fn again. Just refresh the div to remove the space created while .remove() the label element.

Answer 1

The ".remove()" function is to remove children elements from the one which call, not to remove the one which call. So with the code below, only checkbox input element is removed, while label element still remains.

$("[id^=chk"+firstId+"]").remove();

The element calling remove() should be "tbl2", and send the parameter "[id^=chk"+firstId+"]" into the function to define the child element about to remove as below:

$("#tbl2").remove("[id^=chk"+firstId+"]");

Answer 2

.remove()

will work. But make sure that all the components especially

<br/>

etc are put inside the parent element and it is removed. Then the space issue is resolved. The next append will append to the correct space in the div.

Answer 3

The first answer will work. To remove <br> just do it:

$('br').remove(); // https://stackoverflow.com/questions/2513848/how-to-remove-nbsp-and-br-using-javascript-or-jquery

If you're have more id:

$("[id^=chk"+firstId+"]").remove('br');