CODEWITHSUNDEEP
jqueryselectoronfocus
Huma Ali
Huma Ali

Reputation: 1809

Remove span element on focus

I have several Textboxes each with a span element like this:

<span class="reqDiv" name="Required">This value is required</span>
<input class="form-control" id="txtAddress" placeholder="Address" type="text" maxlength="50" autocomplete="off">

<span class="reqDiv" name="Required">This value is required</span>
<input class="form-control" id="txtZip" placeholder="Zip Code" type="text" maxlength="5">

I want to remove the span element of the textbox which is in focus. I tried the following jquery code that removes the span element of all textboxes instead of the particular 'on-focus' textbox. How can I achieve it?

The jquery:

$("#Offer_Form").find(".form-control").on("focus", function (e) {
        $("span[name='Required']")
    });

EDIT: This is how I am generating span tag through jquery:

var SetErrorStateForControl = function (elemObj, msg) {
        elemObj.closest('div').find($("span[name='Required']")).remove();
        $('<span class="reqDiv" name="Required">' + msg + '</span>').prependTo(elemObj.closest('div'));
    }

Upvotes: 0

Views: 1679

Answers (4)

Ayaz Ali Shah
Ayaz Ali Shah

Reputation: 3541

You should use prev() function for finding the previous span and hide() function for removing the span. Example is Here

$(document).ready(function(){
    $('input.form-control').focus(function(e) {
      $(this).prev('span').hide(); // use hide() for hiding
    });
});

If you want to remove the span instead of hiding then just use remove() function.

$(this).prev('span').remove(); // use remove() for removing

Upvotes: 0

Bishal Thapa
Bishal Thapa

Reputation: 61

You could try something like this

$( "input.form-control:text" ).focus(function() {
   $(this).prev().remove();
});

Upvotes: 1

Dhara Parmar
Dhara Parmar

Reputation: 8101

The .prev([selector]) method get the immediately preceding sibling

If you want to remove the previous span element you can try this :

$(document).ready(function(){
    $(".form-control").focus(function(e) {
      $(this).prev('span').remove(); //.prev('span') get the previous span
    });
});

Upvotes: 0

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

You can use the prev() method to get the corresponding span of each tag

$("#Offer_Form").find(".form-control").on("focus", function(e) {
  $(this).prev().remove();
});

Upvotes: 0

Related Questions