当我点击搜索进行第二次搜索时，之前的搜索将被删除

Question

谁能告诉我为什么我的：$("#buton").click(function () { $("#list").find('li').remove(); }); 不工作。我将 .find('li') 更改为 .find('ul') 但它没有帮助。任何建议将不胜感激。这是我的代码：

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

Answer 1

我创建了相同的 html 结构并且您的绑定和删除元素有效。

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

第一个解决方案： 您的问题是在追加 li 元素时，字符串连接错误。所以将其更改为：

$("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>");

在以前的方式中，您正在创建 li 之外的节点，因此选择器无法删除它们。

第二种方案： 或者最终，如果您想离开以前的结构，请使用 empty 方法清除所有节点子节点：

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

当我点击搜索进行第二次搜索时，之前的搜索将被删除

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

javascript

jquery

getjson