In our previous post we saw event delegation using jQuery, in this post we will see JavaScript event delegation.

Make sure you check these two posts before we start with this one.

Let’s get started with our HTML :

 

We have a button(btn-add-textbox) to add text-boxes to our div(div-add-remove). That’s about it with HTML. Next we will add JavaScript to add text-boxes

That looks like lot of code for adding a simple text-box, but all we are doing is constructing a template and adding it to our div.

Template

Template

First we get our button (getButton) and div (getDiv). Next we ask our button(getButton) to listen for a click. Here is what we do once our button hears a click :

  • We create(createElement) a ‘div’ element(divToAdd) and give it a class(className) of ‘magic-div’
  • Next we create(createElement) a ‘input’ element(inputToAdd), give it a type of ‘text’ and class(className) of ‘magic-text-box’
  • Then we create(createElement) a ‘span’ element(spanToAdd), give it a class(className) of ‘remove-textbox’ and add text(‘ x’)(innerHTML) to this span.
  • Then we append(appendChild) the ‘input’ element(inputToAdd) and ‘span’ element(spanToAdd) to the ‘div’ element(divToAdd).
  • Lastly we append(appendChild) the ‘div’ element(divToAdd) to getDiv(div-add-remove).

In short we create a template and append the template to the div. Now let’s look at the next part of our problem, removing text-boxes.

According to the template structure, we will have to click on the ‘span'(spanToAdd) to remove the text-box (we will remove the entire template div for that text-box). This ‘span'(spanToAdd) does not exist on page load, hence JavaScript does not know that it exist. So we will use event delegation to make sure this ‘span’ can listen for an event.

JavaScript Event Delegation

In event delegation, we have to add the event listener to an element closest to the ‘span’ and this element should exist in the DOM on document load. In our example ‘div-add-remove’ will be that element. So we ask ‘div-add-remove'(getDiv) to listen for a click. Once it hears a click we

  • check if the target class is ‘remove-textbox’ (that’s the class given to our span)
  • If that is the case we get the parentElement of this element (to get the complete template)
  • remove parentElement.

And that is all there is to JavaScript Event Delegation. We can also do something like, at a time max 10 text-boxes can only exists in the ‘div’. And when removing at-least one text-box should always exist in the ‘div’

Get full code on github.

SiteLock