单击按钮时删除输入文本

Question

点击按下输入时出现的按钮，我试图删除输入值。

这是我的HTML：

<div class="search-area">
                <form action="#" id="ingredientSearchForm">
                    <input type="text" placeholder="Arama" id="ingredientsSearch"/>
                    <span class="clearable"></span>
                    <span></span>
                    <input id="ingredientSearchSubmit" type="submit" class="hidden" placeholder="Arama"/>

                </form>
            </div>

这是javascript函数：

var searchinput = $(".search-area").find("input");


        searchinput.focus(function(){
            $(this).data('placeholder',$(this).attr('placeholder'));
            $(this).attr('placeholder','');
            $(this).siblings(".clearable").show();



        });

        $(".search-area").find(".clearable").on("click", function() {
            $(this).val('');
        });
        searchinput.blur(function(){
            $(this).attr('placeholder',$(this).data('placeholder'));
            $(this).siblings(".clearable").hide();


        });

.clearable是一个带背景的跨度。通常它是display：none。

Answer 1

如果你想删除span的值，那么：

$(".search-area").find(".clearable").on("click", function() {
            $(this).text('');
        });

如果您要删除文本框值，请执行以下操作：

$(".search-area").on("click",".clearable", function() {
                $(this).closest("#ingredientSearchForm").find('#ingredientsSearch').val('');
            });

Answer 2

我认为你想在点击.clearable时清除searchinput吗？

如果是这样，您应该使用：

$(".search-area").find(".clearable").on("click", function() {
    searchinput.val('');
});