输入文本框添加清空按钮与功能

<input class="query-fiedl" type="text" placeholder="名称"/>

span.clear-box {
                position: relative;
            }
            span.clear-box span {
                position: absolute;
                display: none;
                top: -1px;
                right: 6px;
                width: 18px;
                height: 18px;
                color: rgba(0, 0, 0, 0.485);
                background: #FFF;
                cursor: pointer;
            }
            span.clear-box span:after{
              position: absolute;
              top: 1px;
              right: 2px;
              content: "\274c";
              font-size: .4em;
            }
            
            span.clear-box input {
                padding-right: 16px;
                box-sizing: border-box;
            }

$('.query-fiedl').bind('input',function(){
            if($(this).val() != "") $(this).next().show();
            else $(this).next().hide();
        })
        $('input.query-fiedl').wrap('<span class="clear-box" />').after($('<span></span>').click(function () {
            $(this).prev('input').val('').trigger('change').focus();$(this).hide();
        }));

效果图：