Previous search to be removed when I click search for a second search

Could anyone tell me why my: $("#buton").click(function () { $("#list").find('li').remove(); }); not working. I change the .find('li') with .find('ul') but it did not help. Any suggestion will be highly appreciated. Here is the my code:

<body>
    <div class="container">
        <div class="jumbotron">
            <div class="col-lg-4">
                <input type="text" id="KUNDE" size="50" placeholder="Search by name." />
            </div>
            <div class="col-lg-2">
                <button class="btn btn-default" type="button" id="buton" value="search" onclick="find();">Search</button>                
            </div>
        </div>
        <ul id="list">      </ul>

        <div class="footer"><p> © Copyright 2016</p> <strong><a href="http://rackpeople.com/">RackPeople</a></strong>.</div>
    </div>

    <script>

        $(function () {
            $("#KUNDE").focus();
        });
        $(document).keypress(function (e) {
            if (e.which == 13) {
                $("#buton").click();
            }
        });       
        var uri = 'json.json';
        function find() {
            var info = $('#KUNDE').val();           
            $.getJSON(uri)
                .done(function (data) {
                    var item = data.filter(function (obj) {
                        return obj.name === info || obj.ID === info;                       
                    })[0];
                    if (typeof item !== 'undefined' || item !== null) {
                        $("ul").append("<li>" + 'ID      = ' + item.ID, 'Name    = ' + item.name, "<br />" + 'Phone      = ' + item.phone, "<br />" + 'Contact       = ' + item.contact, "<br />" + 'BalanceLCY      = ' + item.balanceLCY, "<br />" + 'CreditLimitLCY       = ' + item.creditLimitLCY, "</li>")                        
                    }                   
                })
                .fail(function (jqXHR, textStatus, err) {
                    $('#RESULTS').text('Error: ' + err);
                });
        }

            var options = {
                url: "json.json",
                getValue: "name",
                list: {
                    match: {
                        enabled: true
                    }
                },
                theme: "square"
            };
            $("#KUNDE").easyAutocomplete(options);

            $("#buton").click(function () { $("#list").find('li').remove(); });


    </script>
</body>

Solution

I created same html structure and Your binding and removing elements works.

$("#button").click(function (e) { 
$("#list").find('li').remove(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li>
  First result
</li>
<li>
  Second result
</li>
</ul>
<button id="button">
Remove results
</button>

First solution: Your problem is in appending li elements, string concatenation is done wrong. So change it to:

$("ul").append("<li>ID      = " + item.ID + "Name    = "+ item.name + "<br />Phone      = "+ item.phone + "<br />Contact       = " + item.contact+ "<br />BalanceLCY      = " + item.balanceLCY + "<br /> CreditLimitLCY       = " + item.creditLimitLCY+ "</li>");

In previous way You was creating nodes which was outside li so selector cannot removed them.

Second solution: Or eventually if You want leave previous structure use empty method to clear all node childrens:

$("#button").click(function (e) { 
$("#list").empty(); 
});