I'm new to Javascript Classes, or lack of real support for classes.

In any case, I'd like to create a function with which I can create and destroy DOM elements. I'm ok with creating the elements but destroying them is a bit trickier.

How can I call destroy without having to provide the ID?

function WorkZone() {
    this.create = function(id) {
        $('<div>', {
            id: id,
            class: 'work-zone'
        }).appendTo('body');
    }

    this.destroy = function(id) {
        $(id).remove();
    }
}

$(function() {
    var zone = new WorkZone();
    zone.create();
    zone.destroy();
});

I'm new to Javascript Classes, or lack of real support for classes.

In any case, I'd like to create a function with which I can create and destroy DOM elements. I'm ok with creating the elements but destroying them is a bit trickier.

How can I call destroy without having to provide the ID?

function WorkZone() {
    this.create = function(id) {
        $('<div>', {
            id: id,
            class: 'work-zone'
        }).appendTo('body');
    }

    this.destroy = function(id) {
        $(id).remove();
    }
}

$(function() {
    var zone = new WorkZone();
    zone.create();
    zone.destroy();
});

• javascript
• class
• object

• than what would you be destroying without an id?? – Naftali Commented Apr 11, 2011 at 22:22
• Should this also be tagged jQuery? There's some $(...) going on... – Richard JP Le Guen Commented Apr 11, 2011 at 22:23
• Are you using jQuery here, or another framework? You should add a tag or explicitly state which one. – intuited Commented Apr 11, 2011 at 22:24
• It uses jQuery but the question is about plain javascript. – RobG Commented Apr 11, 2011 at 23:38

5 Answers 5

You just need to keep a reference to the element as a property of the object. The destroy method then has a reference directly to the element, you don't even need an id.

function WorkZone() {

    this.create = function(id) {

       // Remember the element
        this.element = $('<div>', {
                         id: id,
                         class: 'work-zone'
                       });
        // This could be chained to the above,
        // but it's a lot easier to read if it isn't
        this.element.appendTo('body');
    }

    this.destroy = function() {
        // Use element reference
        this.element.remove();
    }
}

$(function() {
    var zone = new WorkZone();
    zone.create();
    zone.destroy();
});

But you are much better to put the methods on WorkZone.prototype so they are shared, rather than each instance having its own copy:

function WorkZone() {
  this.element;
}

WorkZone.prototype = {
  create: function(id) {
    this.element = $(..)...// create element, add to document
  },
  destroy: function() {
    this.element.remove();
  }
}

var zone = new WorkZone();
zone.create(id);
zone.destroy();

Use jQuery to do this instead of creating custom code:

http://api.jquery./category/manipulation/

You will get full browser support and optimal code and the ability to do these sorts of DOM manipulations with lots of different kinds of selectors.

try this:

var WorkZone = {
    wz: null,
    create: function(id) {
        this.wz = $('<div>', {
            id: id,
            class: 'work-zone'
        }).appendTo('body');
    },

    destroy: function() {
        this.wz.remove();
    }
}

$(function() {
    var zone = WorkZone;
    zone.create('new_id');
    zone.destroy();
});

Like so:

function WorkZone() {
    this.create = function(id) {
        this.div = $('<div>', {
            id: id,
            class: 'work-zone'
        });
        this.div.appendTo('body');
    }

    this.destroy = function(id) {
         this.div.remove();
    }
}

function WorkZone(id) {
    this.create = function() {
        $('<div>', {
            id: id,
            class: 'work-zone'
        }).appendTo('body');
    }

    this.destroy = function() {
        $('#'+id).remove();
    }
}

$(function() {
    var zone = new WorkZone("ohyeababy");
    zone.create();
    zone.destroy();
});

This is not the optimal way to achieve your end goal, but it is the immediate fix for the duplication in your code. :)