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

Answer 3

选择项目并将文本设置为输入后，添加以下代码段

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

这将删除所选项目的所有兄弟姐妹

要么

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

Answer 4

如果我没有弄错的话，我认为可以通过对代码进行一些修改来完成：

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

我们的想法是将链接容器的html（它包含所有链接）替换为所单击链接的HTML。 从本质上讲，它会删除所有内容，只留下被点击的内容。

这是一个代表这个想法的小提琴 （没有AJAX）。 希望能帮助到你。

Answer 5

请查看此链接以获取有效的演示。 单击此处我使用虚拟数据并使用更改的keyup事件来focus测试您可以更多地修改它（如果这有帮助）。

我希望这能帮到您。

谢谢，

Answer 6

我不明白你。 但是，如果您的意思是链接点击后隐藏结果，您可以使用

$("#results").slideUp('fast'); 

在onclick事件中。 您也可以删除其他链接并实时点击。

$("#results").on("click", "a", function() {
    $("#pickup" ).val($(this).text());
    $(this).addClass('selected');
    $("#results a:not(.selected)").remove();
    $(this).removeClass('selected');
    return false;
});