Ajax/Javascript - 单击1个链接后删除链接

Question

我有以下脚本通过数据库异步获取数据(分支名称):

$(document).ready(function () {
    $("#pickup").on('keyup',function () {
        var key = $(this).val();

        $.ajax({
            url:'modal/fetch_branch.php',
            type:'GET',
            data:'keyword='+key,
            beforeSend:function () {
                $("#results").slideUp('fast');
            },
            success:function (data) {
                $("#results").html(data);
                $("#results").slideDown('fast');
                // use `on` as elements are added dynamically
                $( "#results" ).on("click", "a", function() {
                // take `text` of a clicked element and set it as `#pickup` value
                 $( "#pickup" ).val( $( this ).text() );
                // return false to prevent default action
              return false;
                });
            }
        });
    });
});

HTML

<input type="text" class="form-control empty" name="keyword" id="pickup" placeholder="&#xf041;"/>

一切都很完美,当用户点击链接时,数据(分支名称)被添加到了text input field,这正是需要发生的事情,但是...

我的问题

用户点击了所需的链接(分支名称)后,我需要删除剩余的链接(数据/分支名称)...

从上图可以看出斯泰伦博斯被选中,因此我需要其他链接被删除......

任何建议我如何能够实现以下非常感谢.

UPDATE

这是fetch_branch.php请求的文件:

if(mysqli_num_rows($result) < 1 ) // so if we have 0 records acc. to keyword display no records found
{
    echo '<div id="item">Ah snap...! No results found :/</div>';
} else {

    while ($row = mysqli_fetch_array($result)) //outputs the records
    {
        $branch = $row['location'];
        echo '<a style="cursor:pointer">'.$brach.'</a>';
        echo'<br />';
    }//while
}//else
}//if

Answer 1

我在这里做出了与其他答案不同的假设,因为我无法理解你为什么要在点击一个后删除下拉列表中的其他链接!

从上图可以看出斯泰伦博斯被选中,因此我需要其他链接被删除......

如果确实如此,你会想要接受@ acontell的回答.

但是,如果您希望单击的链接从列表中消失,您可以在单击处理程序中尝试这样的操作:

$("#results").on("click", "a", function() {
    $this = $(this);
    $("#pickup").val($this.text());

    // Remove the linebreaks output by modal/fetch_branch.php
    $this.next('br').remove();

    // Remove the clicked <a> tag itself
    $this.remove();

    // return false to prevent default action
    return false;
});

如果您希望整个下拉列表在点击时消失,请执行以下操作:(我认为这是常见的,不是吗？)

$("#results").on("click", "a", function() {
    $("#pickup").val($(this).text());
    $("#results").slideUp();
    return false;
});

Answer 2

尝试$(this).siblings().remove();点击您的点击事件.所以你的功能应该是这样的,

$(document).ready(function () {
    $("#pickup").on('keyup',function () {
        var key = $(this).val();

        $.ajax({
            url:'modal/fetch_branch.php',
            type:'GET',
            data:'keyword='+key,
            beforeSend:function () {
                $("#results").slideUp('fast');
            },
            success:function (data) {
                $("#results").html(data);
                $("#results").slideDown('fast');
                // use `on` as elements are added dynamically
                $( "#results" ).on("click", "a", function() {
                    // take `text` of a clicked element and set it as `#pickup` value
                    $( "#pickup" ).val( $( this ).text() );
                    //------------------
                    //only this line is newly added
                    //------------------
                    $(this).siblings().remove();
                    //------------------
                    // return false to prevent default action
                    return false;
                });
            }
        });
    });
});