Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Mark Petersen
Mark Petersen
4,049 Points

Remove <LI> from <UL> on click using jQuery

I would like to remove my list result when I search second element from search box. I have tried some jquery query but I assume its not working because I am using it on wrong place or wrong content. Any suggestion will be highly appreciated. Here is the my code:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Kunde</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script> <script src="autocomplete/jquery.easy-autocomplete.min.js"></script> <link href="autocomplete/easy-autocomplete.min.css" rel="stylesheet" />

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="custom.css" rel="stylesheet" />

</head> <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> <!--<button class="btn btn-default" type="button" id="buton" value="search">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").remove(); find(); });

</script>

</body> </html>

2 Answers

michael miday
michael miday
6,649 Points
michael miday
michael miday
6,649 Points

hard to read code as its not formatted properly, to confirm what you are asking for, you want the search results from a previous search to be removed when you click search for a second search?

First stop using ids. for anything that is a horrible bad practice.

As to the answer. I would recommend storing or caching the search field and the UL for the results in variables for easier interaction.

Next question is you intent to replace the contents of the UL with the contents of the second search? If so there is no need to remove it just refactor how you add it.

instead of doing the following

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>")
}

create a buffer variable for the results and write the whole chunk to the ul via the html method.

var content += "<li>" + 'ID = ' + item.ID, 'Name = ' + item.name, "<br />" + 'Phone = ' + item.phone, "<br />" + 'Contact = ' + item.contact, "<br />" + 'BalanceLCY = ' + item.balanceLCY, "<br />" + 'CreditLimitLCY = ' + item.creditLimitLCY, "</li>";

then you can update the ul like so

$("#listl").html(content)

If this is not something you can do then or what you want than with what you have you need to remove the LI and not the UL which is whats happening or sort of in the commented out line.

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

It should be

$("#buton").click(function() { $("#list").find('li').remove(); });
Mark Petersen
Mark Petersen
4,049 Points
Mark Petersen
Mark Petersen
4,049 Points

Michael First of all thank you for your time and spending effort on my project. I have tired : $("#buton").click(function() { $("#list").find('li').remove(); }); But it didn't work for me. Now I need to find out how can I create a buffer variable for the results and write the whole chunk to the ul. Thank you.

michael miday
michael miday
6,649 Points
michael miday
michael miday
6,649 Points

can u pls repost all your code so that its readable