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

You can achieve the same result by using visibility instead of display for a different behavior. While display removes the element from the layout, visibility keeps the space but hides the content. This approach also applies the JavaScript hide element technique.

function showStuff(id) {
document.getElementById(id).style.display = 'block';
document.getElementById('editLink').style.visibility = 'hidden'; // Hide 'Edit' link
document.getElementById('loremText').style.visibility = 'hidden'; // Hide 'lorem ipsum'
}

This approach leverages the JavaScript hide element functionality by altering the visibility property.

#4

You can also use to add or remove a class that toggles the visibility of elements. This approach is more flexible as it allows you to define the hidden behavior in CSS and simply toggle it via JavaScript, which aligns well with the JavaScript hide element method.

function showStuff(id) {
document.getElementById(id).style.display = 'block';
document.getElementById('editLink').classList.add('hidden'); // Hide 'Edit' link
document.getElementById('loremText').classList.add('hidden'); // Hide 'lorem ipsum'
}

Using lets you maintain a clean separation between JavaScript and CSS while applying the JavaScript hide element concept.