Another magic trick that I love most is when objects disappear. Specially pretty ladies, I wonder what magicians do with them.

If magicians can make objects disappear, so can we. But we can only make elements disappear from our DOM using jQuery.

Check this post to see how this can be done using JavaScript

Lets define our trick : We will remove textboxes from a div every time a button is clicked.

We have a div (‘div-textbox-here’) with four textboxes. We also have a button (‘btn-remove-textbox’). When a user clicks on this button we will remove the first textbox.

We use our ‘.on()’ spell to listen when the button is clicked.

What do we do next, remove the first textbox from the div.

We have our button listening for a click. And as soon as it hears a click, it will

  1. Go to the div (‘div-textbox-here’)
  2. ‘find()’ all ‘input’ elements
  3. Get the ‘first()’ input element
  4. And ‘remove()’ it

And like always we can extend this the way we want. Like we can make sure that there is always at least one element present in the div.

This is what we do here

  1. Go to the div (‘div-textbox-here’)
  2. ‘find()’ all ‘input’ elements
  3. Check if number(length) of ‘input’ elements is greater than 1
  4. If yes then get the ‘first()’ input element
  5. And ‘remove()’ it

Get full code on github