Help with Jquery: $(this).children('.someClass').remove();

programming web dev
1

Here is my function


(function($) {
  $.fn.extend({
    jqErrorText : function(text) {
    
      if ($(this).children('.errortext').length == 0){
        var span = $('<span />', {
          "class": "errortext"
        }).html(text);
        
        this.append(span);
        this.children().keyup(function(){

          $(this).children('.errortext').remove(); // this is not working and I don't know why!
          
          $(this).removeClass('error');
        });
      }
    }
    });
})(jQuery);

The code will work entirely except that I cannot seem to remove the span element that I have created. What I find most confusing is that if I replace $(this).children(’.errortext’).remove(); with just $(’.errortext’).remove() it works. The problem of course is that if multiple fields on my form have an error, then they all are removed. Yet the other usage of $(this).removeClass(‘error’) works just perfectly. Why can’t I reference the child of $(this) and do a remove() to it?

Thanks!