Ajax/Javascript - удалять ссылки после того, как была нажата 1 ссылка

У меня есть следующий script, который извлекает данные (имена ветвей) асинхронно через базу данных:

$(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, что именно то, что должно произойти, однако...

Моя проблема

После того, как пользователь нажал на нужную ссылку (название ветки), мне нужно удалить оставшиеся ссылки (имена данных/веток)...

Как видно из вышеизложенного, был выбран Stellenbosch, поэтому мне нужно, чтобы другие ссылки удалялись...

Любые советы, как я могу добиться следующего, получили высокую оценку.

ОБНОВЛЕНИЕ

Вот файл 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

Ответ 1

попробуйте $(this).siblings().remove(); внутри вашего события click. поэтому ваша функция должна выглядеть так:

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

Ответ 2

Я делаю другое предположение из других ответов здесь, потому что я не понимаю, почему вы хотите удалить другие ссылки в раскрывающемся списке, щелкнув один!

Как видно из вышеизложенного, был выбран Stellenbosch, поэтому мне нужно, чтобы ссылки другие удалялись...

Если это действительно так, вам нужно принять ответ @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;
});

Ответ 3

После выбора элемента и установки введенного текста добавьте следующий фрагмент кода

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

Это удаляет все дочерние элементы выбранного элемента

или

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

Ответ 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-ссылкой по ссылке. По сути, он удалит все и оставит только щелкнув.

Здесь fiddle (без AJAX), который представляет эту идею. Надеюсь, что это поможет.

Ответ 5

Пожалуйста, проверьте эту ссылку для рабочей демонстрации. Нажмите здесь Я использовал фиктивные данные и использовал измененное событие keyup для focus для тестирования, вы можете изменить его больше (если это помогает).

Надеюсь, это поможет вам.

Спасибо,

Ответ 6

Я тебя не понимаю. Однако, если вы имеете в виду результат скрытия после нажатия ссылки, вы можете использовать

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