If you want to remove an element using Javascript similar to the way SWFObject 2 does automatically for you when you’re conditionally including FLASH –

The reason you might want to remove the code between div tags is because you might have conditional CSS stylesheet modifications, forms you may or may not want included on a page or possibly even different elements you might want to include depending on the browser being used.

I would like to thank Dustin Dias for his excellent post on this. I have created this post more for my own reference than anything else along with my particular ‘spin’ on this.

The way Javascript interacts with an HTML page elements through the DOM (Document Object Model)  is quite similar to Flash’s ActionScript 3 works, creating an Event Listener, and then either Adding or Removing ‘children’.

attach event / add / remove

* element.addEventListener(el, type, fn);
* parent.appendChild(element);
* parent.removeChild(element);

Yeah. That’s it. But this wouldn’t be much of a post if there wasn’t a demonstration of how to wrap this up in a easy to use interface. For this basic task, consider using two singleton’s as a skeleton to act as your API which will appropriately wrap your Dom object, and an Event object.

Dom and Event

var Dom = {
  get: function(el) { },
  add: function(el, dest) { },
  remove: function(el)
};

Event = {
  add: function(el, type, fn) { }
};

Your implementation code can live in a closure wrapper when we add this behavior to the window’s ‘load’ event.

implementation

Event.add(window, 'load', function() {
  // enclosed implementation here
});

Filling in the gaps

We can now essentially drop in our interface to do our heavy lifting.

Interface

var Dom = {
  get: function(el) {
    if (typeof el === 'string') {
      return document.getElementById(el);
    } else {
      return el;
    }
  },
  add: function(el, dest) {
    var el = this.get(el);
    var dest = this.get(dest);
    dest.appendChild(el);
  },
  remove: function(el) {
    var el = this.get(el);
    el.parentNode.removeChild(el);
  }
  };
  var Event = {
  add: function() {
    if (window.addEventListener) {
      return function(el, type, fn) {
        Dom.get(el).addEventListener(type, fn, false);
      };
    } else if (window.attachEvent) {
      return function(el, type, fn) {
        var f = function() {
          fn.call(Dom.get(el), window.event);
        };
        Dom.get(el).attachEvent('on' + type, f);
      };
    }
  }()
 };

Then simply use it to our convenience.

implementation

Event.add(window, 'load', function() {
  var i = 0;
  Event.add('add-element', 'click', function() {
    var el = document.createElement('p');
    el.innerHTML = 'Remove This Element (' + ++i + ')';
    Dom.add(el, 'content');
    Event.add(el, 'click', function(e) {
      Dom.remove(this);
    });
  });
});

You now have something that’s easy as Pie! View the demonstration. Cheers and happy new year!

0 comments

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>