Removing An Element via a Link

The display property can be used for removing HTML elements from the page and reclaiming the empty space. Notice that using this property yields different results than when using the visibility property. When you turn off the visibility, the HTML element seems to be transparent, but the empty space is not reclaimed. There are a few ways to use the display property. One way is to trigger the disappearance and reappearance of a certain HTML element from another HTML element. The following two paragraphs are from the previous page. Clicking the link in front of them will cause the disappearance of the first paragraph:

To implement the above behaviour you have to add three items to your page. First, you need to add the line where the user can click to remove or bring back the first paragraph. This is a simple SPAN element:

<SPAN STYLE="cursor: hand; color: tan"
onClick="disappear(fontPar)">Click here to disappear or bring
back the first paragraph below:</SPAN>

Secondly, you have to make sure the first paragraph has an ID which is assigned here the value of fontPar:

<SPAN ID="fontPar" STYLE="color:purple" onMo...

And finally, you need to add the following script that implements the disappear() function:

function disappear(obj) {
  if (obj.style.display == "none") {
    obj.style.display = "";
  }
  else {
    obj.style.display = "none";
  }
}

Notice the specification of the cursor for the link above, cursor: hand. Other values are: crosshair, default, hand, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, test, wait, and help.

How to remove an element via itself