CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3
caitlin
caitlin

Reputation: 2819

Adding "Clear Field" buttons to Bootstrap 3 inputs using jQuery + CSS class

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;
}

Upvotes: 3

Views: 12910

Answers (3)

ivelander
ivelander

Reputation: 186

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.com/130369

Upvotes: 1

Felix
Felix

Reputation: 38102

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

Upvotes: 4

Lawrence Johnson
Lawrence Johnson

Reputation: 4043

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.com/130368

Upvotes: 1

Related Questions