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

我有以下脚本，它通过数据库异步获取数据（分支名称）：

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

---

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

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

在onclick事件中。 您还可以删除其他链接并单击live

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

---

如果我没有弄错的话，我认为可以对代码稍加修改：

...
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）代表了这个想法。希望能有所帮助。

我的假设与这里的其他答案不同，因为我不明白你为什么要在单击一个链接后删除下拉列表中的其他链接

从上图可以看出，Stellenbosch被选中，因此我需要其他链接才能删除

如果情况确实如此，您将希望接受@acontell的答案

但是，如果希望单击的链接从列表中消失，可以在单击处理程序中尝试以下操作：

---

请检查此链接以获得可用的演示。 我使用了虚拟数据，并使用已更改的

keyup

事件对

focus

进行测试，您可以对其进行更多修改（如果这有帮助的话）

我希望这对你有帮助

谢谢，

尝试

$（this）.sides（）.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;
                });
            }
        });
    });
});

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

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

这将删除选定项的所有同级li

或

一些html可能会很抱歉刚才添加了
输入字段
请为Stellenbosch、StrandInside click handler等链接添加html，顺便说一句，这些链接不应设置在成功回调中，也不应嵌套在keyup事件中，请使用
$（“#结果a”）。而不是（这个）。删除（）@user2181397通过PHP from DB在单独的文件中获取，一旦选择链接，将立即更新我想删除其他链接…请参阅屏幕截图，但没有这样做…谢谢您的贡献
$("#results").on("click", "a", function() {
    $("#pickup").val($(this).text());
    $("#results").slideUp();
    return false;
});

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

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

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