代码之家 › 专栏 › 技术社区 › Timothy Coetzee

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

html ajax jquery php javascript

Timothy Coetzee · 技术社区 · 10 年前

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

$(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 ,这正是需要发生的,然而。。。

我的问题

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

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

非常感谢您对我如何实现以下目标的任何建议。

更新

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

6 回复 | 直到 10 年前

Cameron Hurd 9 年前

去除单击一个后,下拉列表中的其他链接!

从上图中可以看出,斯泰伦博世被选中,因此我需要另外要删除的链接。。。

如果情况确实如此,您将希望接受@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;
});

Ashraful Islam 9 年前

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

Neethu George 9 年前

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

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

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

或

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

acontell 9 年前

如果我没弄错的话,我认为可以对您的代码稍加修改:

...
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(它包含所有链接)。本质上,它将删除所有,只留下单击的一个。

这是一个 fiddle (没有AJAX)这代表了这个想法。希望有帮助。

Mehmood 9 年前

Click Here 我曾经 虚拟数据 keyup 事件 focus 对于测试,您可以对其进行更多修改(如果有帮助)。

我希望这对你有帮助。

Dmitry 10 年前

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

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