Variable Scope: this.remove is not a function

Question

this.remove() is not a function. How come?

var vehicle = function () {
    return {
        init: function () {
            jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) {
                e.preventDefault();
                this.remove();
            });
        },
        remove: function () {
            alert('test');
        }
    }
}();

jQuery().ready(vehicle.init);

Sorry for the confusion. I'm trying to call my own "remove" function. This is simply a class to manage vehicles on my page. This is the beginning of it and it will have a lot more functions than just init/remove.

Answer 1

this is a DOM element. To use jQuery's .remove() method, you need to wrap it in a jQuery object.

$(this).remove();

EDIT: If you were hoping to call the remove() function in the vehicle object, then call:

vehicle.remove();

---

Also, if you were hoping to shorten your .ready() call, you can do this:

jQuery(vehicle.init);

From the jQuery 1.4 release notes:

The jQuery().ready() technique still works in 1.4 but it has been deprecated. Please use either jQuery(document).ready() or jQuery(function(){}).

Answer 2

var vehicle = function () {
    return {
        init: function () {
            var self = this;
            jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) {
                e.preventDefault();
                self.remove();
            });
        },
        remove: function () {
            alert('test');
        }
    }
}();

jQuery().ready(function() {
   vehicle.init();
});

Answer 3

Maybe you're looking for something like this?

var vehicle = new function () {

  var self = this;

  this.init = function () {
    jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) {
      e.preventDefault();
      self.remove();
    });
  };

  this.remove = function () {
    alert('test');
  };

};

...or like this maybe? It's kind of hard to tell what you're going for...

var vehicle = new function () {

  function remove () {
    alert('test');
  }

  this.init = function () {
    jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) {
      e.preventDefault();
      remove.call(this);
    });
  };

};

Answer 4

Since you said you're trying to call your own remove function, here's how to do it:

var vehicle = (function () {
    return {
        init: function () {
            var that = this; // step one
            jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) {
                e.preventDefault();
                that.remove();
            });
        },
        remove: function () {
            alert('test');
        }
    }
}()); // step zero - wrap the immediate invocation in parens

jQuery(function () {
    vehicle.init(); // step two
);

Answer 5

When invoking a function as a method "this" refers to the object that is invoking it. In jQuery the function passed is invoked as a method of the html element so "this" becomes the element.

To make sure you are refering to the correct object you'll need to create a reference to the original object.

   var vehicle = function () {
       var that =  {
        init: function () {
            jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) {
                e.preventDefault();
                that.remove();
            });
        },
        remove: function () {
            alert('test');
        }
    }
    return that;
   }();

jQuery().ready(vehicle.init);