Odtnhj

I am appending button on checkbox click, but need to uncheck when I close the appended button.

$(".left-menu input[name='freeAsset']").click(function() 
 if ($(this).is(':checked')) 
 $('.search_lable').append('<li><button type="button" class="btn-close image" aria-label="Close" style="display: inline-block;">' + $(this).parent('div').children('span').text() + '<span aria-hidden="true" id="' + this.id + '">×</span></button></li>');
 $('.filter-label li .btn-close span').click(function() 
 $(this).closest('li').remove();
 );
 else 
 $(".search_lable").find("button:contains(" + $(this).parent('div').children('span').text() + ")").filter(function() 
 return $(this).parent('li').length > 0;
 ).remove();
 
);

FIDDLE DEMO

From question i understand that OP need to uncheck the check box after closing the button. So i did the following way.

$('.filter-label li .btn-close span').click(function()
 $('input[type=checkbox][id='+$(this).attr('id') +']').prop('checked',false);// Newly added code to uncheck the checkbox.
 $(this).closest('li').remove();
);

DEMO HERE

Working fiddle.

Since you're appendin an li element when the user check, you need to remove the parent li not the button itself when the user uncheck, the just add .closest('li') before removing :

$(".search_lable").find("button:contains(" + $(this).parent('div').children('span').text() + ")").filter(function() 
 return $(this).parent('li').length > 0;
).closest('li').remove();
___^^^^^^^^^^^^^

In else you trying to select button and remove it using .remove(). So you should select li parent of button using .parent() and remove it.

$(".left-menu input[name='freeAsset']").click(function() 
 if($(this).is(':checked')) 
 $('.search_lable').append('<li><button type="button" class="btn-close image" aria-label="Close" style="display: inline-block;">'+ $(this).parent('div').children('span').text() +'<span aria-hidden="true" id="'+this.id+'">×</span></button></li>');
 $('.filter-label li .btn-close span').click(function()
 $(this).closest('li').remove();
 );
 else 
 $(".search_lable").find("button:contains(" + $(this).parent('div').children('span').text() +")").filter(function () 
 return $(this).parent('li').length > 0;
 ).parent().remove();
 
); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="left-menu">
 <li>
 <div class="label-cont clearfix">
 <input type="checkbox" name="freeAsset" value="valuable" id="Skills1">
 <label for="Skills1" class="chk"></label>
 <span class="txt">Soft Skills</span>
 </div>
 </li>
 <li>
 <div class="label-cont clearfix">
 <input type="checkbox" name="freeAsset" value="valuable" id="Skills2">
 <label for="Skills2" class="chk"></label>
 <span class="txt">Technical Skills</span>
 </div>
 </li>
</ul>
<ul class="filter-label clearfix search_lable"></ul>

Also you can use simpler code as shown in bottom

$(".left-menu input[name='freeAsset']").click(function() 
 var text = $(this).parent('div').children('span').text();
 if ($(this).is(':checked'))
 $('.search_lable').append('<li><button type="button" class="btn-close image" aria-label="Close" style="display: inline-block;">'+ text +'<span aria-hidden="true" id="'+this.id+'">×</span></button></li>');
 else 
 $(".search_lable li button:contains("+text+")").parent().remove();
); 
$(document).on('click', '.filter-label li .btn-close span', function()
 $(this).closest('li').remove();
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="left-menu">
 <li>
 <div class="label-cont clearfix">
 <input type="checkbox" name="freeAsset" value="valuable" id="Skills1">
 <label for="Skills1" class="chk"></label>
 <span class="txt">Soft Skills</span>
 </div>
 </li>
 <li>
 <div class="label-cont clearfix">
 <input type="checkbox" name="freeAsset" value="valuable" id="Skills2">
 <label for="Skills2" class="chk"></label>
 <span class="txt">Technical Skills</span>
 </div>
 </li>
</ul>
<ul class="filter-label clearfix search_lable"></ul>