javascript - Adding "Clear Field" buttons to Bootstrap 3 inputs using jQuery + CSS class - Stack Overflow

admin管理员组

文章数量:1296307

How can I add a "Clear field" button to multiple Bootstrap 3 input fields just using jQuery and a CSS class?

I've found solutions that can add a 'clear field' button to a field with a particular ID, but nothing so far that can do it by class. I've got a form with a lot of fields and I'd rather not have to repeat my code over again for each field.

I've tried this so far (Bootply), but I can't figure out how to get jQuery to clear just the one field and toggle the one icon, not all of them.

//JS

        $(document).ready(function(){
            $(".searchinput").keyup(function(){
                $(".searchclear").toggle(Boolean($(this).val()));
            });
            $(".searchclear").toggle(Boolean($(".searchinput").val()));
            $(".searchclear").click(function(){
                $(".searchinput").val('').focus();
                $(this).hide();
            });
        });

//HTML

       <div class="btn-group">
         <input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value="">
         <span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle">           </span>
       </div>

       <div class="btn-group">
         <input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value="">
         <span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"></span>
       </div>

//CSS

.searchinput {
    width: 200px;
}

.searchclear {
    position:absolute;
    right:5px;
    top:0;
    bottom:0;
    height:14px;
    margin:auto;
    font-size:14px;
    cursor:pointer;
    color:#ccc;
}

How can I add a "Clear field" button to multiple Bootstrap 3 input fields just using jQuery and a CSS class?

I've found solutions that can add a 'clear field' button to a field with a particular ID, but nothing so far that can do it by class. I've got a form with a lot of fields and I'd rather not have to repeat my code over again for each field.

I've tried this so far (Bootply), but I can't figure out how to get jQuery to clear just the one field and toggle the one icon, not all of them.

//JS

        $(document).ready(function(){
            $(".searchinput").keyup(function(){
                $(".searchclear").toggle(Boolean($(this).val()));
            });
            $(".searchclear").toggle(Boolean($(".searchinput").val()));
            $(".searchclear").click(function(){
                $(".searchinput").val('').focus();
                $(this).hide();
            });
        });

//HTML

       <div class="btn-group">
         <input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value="">
         <span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle">           </span>
       </div>

       <div class="btn-group">
         <input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value="">
         <span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"></span>
       </div>

//CSS

.searchinput {
    width: 200px;
}

.searchclear {
    position:absolute;
    right:5px;
    top:0;
    bottom:0;
    height:14px;
    margin:auto;
    font-size:14px;
    cursor:pointer;
    color:#ccc;
}

• javascript
• jquery
• css
• twitter-bootstrap
• twitter-bootstrap-3

Share Improve this question Follow asked Apr 16, 2014 at 3:00 caitlincaitlin 2,82944 gold badges3131 silver badges6565 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

1) You can use $(this) to get a reference to the current targeted element

2) Use .next() to toggle the visibility for only the icon which is the next immediate sibling of input that you're currenlty key in

3) Use .prev() to clear only the input which is the immediate previous sibling of clear icon that is clicked:

Final code should look like:

$(document).ready(function () {
    $(".searchinput").keyup(function () {
        $(this).next().toggle(Boolean($(this).val()));
    });
    $(".searchclear").toggle(Boolean($(".searchinput").val()));
    $(".searchclear").click(function () {
        $(this).prev().val('').focus();
        $(this).hide();
    });
});

Bootply Demo

Try changing your javascript code to this:

        $(document).ready(function(){
            $(".searchinput").keyup(function(){
                $(this).parent().find('.searchclear').toggle(Boolean($(this).val()));
            });
            $(".searchclear").toggle(Boolean($(".searchinput").val()));
            $(".searchclear").click(function(){
                $(this).parent().find('.searchinput').val('').focus();
                $(this).hide();
            });
        });

Essentially what it does is add scope to the clear buttons so that it is limited to the sibling. There are other jQuery functions that might be more specific, but this should work.

http://www.bootply./130368

Another option would be to use .siblings() to make sure you are targeting just the siblings with the searchclear class.

        $(document).ready(function(){
            $(".searchinput").keyup(function(){
                $(this).siblings(".searchclear").toggle(Boolean($(this).val()));
            });
            $(".searchclear").toggle(Boolean($(".searchinput").val()));
            $(".searchclear").click(function(){
                $(".searchinput").val('').focus();
                $(this).hide();
            });
        });

http://www.bootply./130369

本文标签： javascriptAdding quotClear Fieldquot buttons to Bootstrap 3 inputs using jQueryCSS classStack Overflow