Ajax / Javascript - Remove Links After 1 Link Has Been Clicked

Question

I have the following script which fetches data (branch names) asynchronously via database:

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

Everything is working perfectly, When user clicks link the data (branch name) gets added to the text input field, which is exactly what needs to happen, however...

My Problem

After user has clicked on desired link (branch name) I need the remaining links (data / branch names) to get removed...

As can be seen from above image Stellenbosch was selected, thus I need the other links to get removed...

Any advice how I can achieve the following greatly appreciated.

UPDATE

Here is the fetch_branch.php file as requested:

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

I'm making a different assumption from the other answers here, because I can't understand why you'd want to remove the other links in the dropdown, after clicking one!

As can be seen from above image Stellenbosch was selected, thus I need the other links to get removed...

If that is indeed the case, you'll want to accept @acontell's answer.

However, if you'd like the clicked link to disappear from your list, you might try something like this in the click handler:

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

In case you'd like the whole dropdown to disappear when clicked, do this: (which, I think is common, no?)

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

Answer 2

try $(this).siblings().remove(); inside your click event. so your function should look like this,

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

Answer 3

After selecting the item and setting the text to input add the following code snippet

 $(this).siblings().remove();

This removes all the sibling li s of the selected item

or

$( "#results a" ).not(this).remove();

Answer 4

If I'm not mistaken, I think it could be done with a little modification to your code:

...
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() );

        // --MODIFICATION-- Remove all elements except this.
        $("#results").html(this);

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

The idea is to substitute the html of the link container (it contains all the links) with the HTML of the clicked link. In essence, it will remove all and leave only the clicked one.

Here's a fiddle (without AJAX) that represents the idea. Hope it helps.