Hide 'Edit' Link and Text with JavaScript

Product Support
, ,
#1

How can I hide the ‘Edit’ link and also hide the “lorem ipsum” text when I press the ‘Edit’ link in JavaScript? I need a solution using the JavaScript hide element technique.

#2

You can modify your showStuff function to hide both the “Edit” link and the “lorem ipsum” text by setting their display to ‘none’. This approach uses the JavaScript hide element technique effectively.

HTML:

<td class="post">
  <a href="#" id="editLink" onclick="showStuff('answer1'); return false;">Edit</a>
  <span id="answer1" style="display: none;">
    <textarea rows="10" cols="115"></textarea>
  </span>
  <span id="loremText">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>

JavaScript:





}

This solution uses the JavaScript hide element technique by manipulating the display property.

#3

If you want to hide an element on your webpage while keeping its space reserved in the layout, you can use the visibility property in your JavaScript. Unlike display: none, which completely removes the element from the layout, setting visibility to hidden ensures the element is invisible but still occupies its original space.

For example, imagine you have a section of text labeled “lorem ipsum” and a link labeled “Edit.” When you want to show a new element while hiding these, you can use the following approach:

Within your JavaScript function, you can make the new element visible by changing its style to display: block. At the same time, you can hide the “Edit” link and the “lorem ipsum” text by setting their visibility to hidden. This ensures they remain part of the layout but are not visible to the user.

To implement this, you might create a button or another interactive element that calls a function to make these changes. For example, clicking a button could trigger a function where:

  • The new content becomes visible (style.display = 'block').
  • Both the “Edit” link and “lorem ipsum” text are hidden (style.visibility = 'hidden').

This method is useful when you want to preserve the layout structure while temporarily hiding elements, maintaining a smooth and predictable user interface.

#4

To toggle the visibility of elements in a web page effectively, you can use JavaScript in combination with CSS classes. This method keeps your styles defined in CSS while allowing JavaScript to manage when they are applied. For example, you can define a .hidden class in CSS that hides elements by setting display: none. When you want an element to be hidden, you simply add this class to it using JavaScript.

Imagine you have a paragraph and a button. The paragraph starts visible, and the button is used to hide the paragraph and show something else. In the CSS, you might write a rule like this:

.hidden {
  display: none;
}

Then, in JavaScript, you could define a function that toggles this class. For instance, if you wanted to hide a paragraph with an ID of loremText and a link with the ID editLink when a button is clicked, you would add the .hidden class to those elements. The function could also make another element visible by removing the .hidden class from it.

This approach is very flexible because it allows you to control all the styles for hidden elements in one place (the CSS) and keeps your JavaScript focused on behavior. For example, instead of directly changing the styles in JavaScript, you just manage the classes:

  • To hide an element, you add the hidden class:

    element.classList.add('hidden');

  • To show it again, you remove the hidden class:

    element.classList.remove('hidden');

This clean separation between styles and behavior makes your code easier to maintain.