Removing An Element via Itself

The second way to use the display property is to dynamically modify it from the element itself. For example, you can implement your page in such a way that the user may remove a paragraph when he or she wants to squeeze the amount of data on the page. Since the paragraph is removed, there is no way to return it but by reloading the page or implementing a link that, upon clicking reclaims the lost data. The following tutorial page demonstrates the first of these options. Mouse over any of the examples below to remove them. Reload the page from the browser menu to return the page to its initial condition:

So far in this column we have taught you how to use the following dynamic style strategies:

Reassigning the SRC attribute of an IMG element:

Using the onPropertyChange event handler to do an extra action:

Changing the font size:

Changing the font family:

Removing a paragraph by clicking a link:

We just copied all examples from previous pages and wrapped each one of them in a DIV element:

<DIV onMouseOver="this.style.display = 'none'">
  <SPAN ....
  </SPAN>
</DIV>

Obviously, the examples on this page are not functional because they disappear immediately when you mouse over them. Go back to previous pages to play around with these examples.

How to hide elements without reflowing