Как я могу скрыть ссылку «Редактировать» после нажатия на нее? а также можно ли скрыть текст "lorem ipsum" при нажатии кнопки "Изменить"?

<script type="text/javascript">
function showStuff(id) {
  document.getElementById(id).style.display = 'block';
}
</script>


<td class="post">

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

  Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
</td>

Вы также можете использовать этот код, чтобы показать / скрыть элементы:

document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";

Примечание . Разница между style.visibilityи style.displayзаключается в использовании видимости: скрыто в отличие от отображения: нет, тег не виден, но для него выделено место на странице. Тег отображается, его просто не видно на странице.

Смотрите эту ссылку, чтобы увидеть различия.

Я хотел бы предложить вам вариант JQuery .

$("#item").toggle();
$("#item").hide();
$("#item").show();

Например:

$(document).ready(function(){
   $("#item").click(function(event){
     //Your actions here
   });
 });

Я хотел бы предложить это, чтобы скрыть элементы (как предлагали другие):

document.getElementById(id).style.display = 'none';

Но чтобы сделать элементы видимыми, я бы предложил это (вместо display = 'block'):

document.getElementById(id).style.display = '';

Причина в том, что использование display = 'block' приводит к появлению дополнительного поля / пробела рядом с элементом, видимым как в IE (11), так и в Chrome (версия 43.0.2357.130 m) на странице, над которой я работаю.

При первой загрузке страницы в Chrome элемент без атрибута стиля будет выглядеть следующим образом в инспекторе DOM:

element.style {
}

Скрытие этого с помощью стандартного JavaScript делает это, как и ожидалось:

element.style {
  display: none;
}

Сделав его снова видимым, используя display = 'block', изменим его на следующее:

element.style {
  display: block;
}

Что не так, как было изначально. Это вполне может не иметь никакого значения в большинстве случаев. Но в некоторых случаях это приводит к отклонениям.

Использование display = '' восстанавливает его исходное состояние в DOM-инспекторе, поэтому кажется, что это лучший подход.

Вы можете использовать скрытое свойство элемента:

document.getElementById("test").hidden=true;
document.getElementById("test").hidden=false

Вы должны думать JS для поведения, и CSS для визуального конфет как можно больше. Немного изменив свой HTML:

<td class="post">
    <a class="p-edit-btn" href="#" onclick="showStuff(this.parentNode);return false;">Edit</a>
    <span id="answer1" class="post-answer">
       <textarea rows="10" cols="115"></textarea>
    </span>
    <span class="post-text" id="text1">Lorem ipsum ... </span>
</td>

Вы сможете переключаться с одного вида на другой, просто используя правила CSS:

td.post-editing > a.post-edit-btn,
td.post-editing > span.post-text,
td.post > span.post-answer
{
    display : none;
}

И JS-код, который переключается между двумя классами

<script type="text/javascript">
function showStuff(aPostTd) {
    aPostTd.className="post-editing";
}
</script>

Хотя на этот вопрос уже давали ответы много раз, я подумал, что добавлю к нему более полный и надежный ответ для будущих пользователей. Основной ответ решает проблему, но я считаю, что может быть лучше узнать / понять некоторые из различных способов показать / скрыть вещи.

,

Изменение отображения с помощью css ()

Так я делал, пока не нашел другие способы.

Javascript:

$("#element_to_hide").css("display", "none");  // To hide
$("#element_to_hide").css("display", "");  // To unhide

Плюсы:

• Скрывает и показывает Вот и все.

Минусы:

• Если вы используете атрибут «display» для чего-то другого, вам придется жестко указать значение того, что было до сокрытия. Так что если бы у вас был «встроенный», вам пришлось бы делать$("#element_to_hid").css("display", "inline"); иначе, он по умолчанию вернется к «блокировать» или что-то еще, что он будет вынужден.
• Поддается опечаткам.

Пример: https://jsfiddle.net/4chd6e5r/1/

,

Изменение отображения с помощью addClass () / removeClass ()

При создании примера для этого я столкнулся с некоторыми недостатками этого метода, которые делают его очень ненадежным.

Css / Javascript:

.hidden {display:none}
$("#element_to_hide").addClass("hidden");  // To hide
$("#element_to_hide").removeClass("hidden");  // To unhide

Плюсы:

• Прячется .... иногда. Обратитесь к p1 в примере.
• После отображения он вернется к использованию предыдущего отображаемого значения .... иногда. Обратитесь к p1 в примере.
• Если вы хотите захватить все скрытые объекты, вам просто нужно сделать $(".hidden").

Минусы:

• Не скрывает, если отображаемое значение было установлено непосредственно в HTML. Обратитесь к p2 в примере.
• Не скрывает, если отображение установлено в javascript с помощью css (). Обратитесь к p3 в примере.
• Чуть больше кода, потому что вы должны определить атрибут css.

Пример: https://jsfiddle.net/476oha8t/8/

,

Изменение отображения с помощью переключателя ()

Javascript:

$("element_to_hide").toggle();  // To hide and to unhide

Плюсы:

• Всегда работает.
• Позволяет вам не беспокоиться о том, какое состояние было до переключения. Очевидное использование этого для .... кнопки переключения.
• Коротко и просто.

Минусы:

• Если вам нужно знать, в какое состояние он переключается, чтобы сделать что-то не связанное напрямую, вам нужно будет добавить больше кода (оператор if), чтобы выяснить, в каком состоянии он находится.
• Как и в предыдущем случае, если вы хотите запустить набор инструкций, который содержит toggle () с целью скрытия, но вы не знаете, скрыт ли он, вы должны добавить проверку (оператор if) сначала выяснить, а если он уже скрыт, то пропустить. Обратитесь к p1 примера.
• Относительно предыдущих двух минусов, использование toggle () для чего-то, что специально скрывает или показывает, может сбить с толку других, читающих ваш код, поскольку они не знают, каким образом они будут переключаться.

Пример: https://jsfiddle.net/cxcawkyk/1/

,

Изменение отображения с помощью hide () / show ()

Javascript:

$("#element_to_hide").hide();  // To hide
$("#element_to_hide").show();  // To show

Плюсы:

• Всегда работает.
• После отображения он вернется к использованию предыдущего отображаемого значения.
• Вы всегда будете знать, к какому состоянию вы меняетесь, поэтому вы:
  1. не нужно добавлять операторы if для проверки видимости перед изменением состояний, если состояние имеет значение.
  2. не будет смущать других, читающих ваш код относительно того, в какое состояние вы переходите, если, если состояние имеет значение.
• Интуитивно.

Минусы:

• Если вы хотите имитировать переключение, вам сначала нужно проверить состояние, а затем переключиться в другое состояние. Вместо этого используйте toggle (). Обратитесь к p2 примера.

Пример: https://jsfiddle.net/k0ukhmfL/

,

В целом, я бы сказал, что лучше всего быть hide () / show (), если вам не нужно, чтобы это было переключение. Я надеюсь, что вы нашли эту информацию полезной.

Просто создайте методы скрытия и отображения самостоятельно для всех элементов следующим образом

Element.prototype.hide = function() {
    this.style.display = 'none';
}
Element.prototype.show = function() {
    this.style.display = '';
}

После этого вы можете использовать методы с обычными идентификаторами элементов, как в следующих примерах:

document.getElementByTagName('div')[3].hide();
document.getElementById('thing').show();

или:

<img src="removeME.png" onclick="this.hide()">

Я рекомендую Javascript, потому что он относительно быстрый и более податливый.

    <script>
function showStuff(id, text, btn) {
document.getElementById(id).style.display = 'block';
// hide the lorem ipsum text
document.getElementById(text).style.display = 'none';
// hide the link
btn.style.display = 'none';
}
</script>


<td class="post">

<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>

<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>

Если вы используете его в таблице, используйте это: -

  <script type="text/javascript">
   function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'table-row';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}
</script>


<td class="post">

<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>

<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>

Vanilla JS для классов и удостоверений личности

По идентификатору

document.querySelector('#element-id').style.display = 'none';

По классу (один элемент)

document.querySelector('.element-class-name').style.display = 'none';

По классу (несколько элементов)

for (let elem of document.querySelectorAll('.element-class-name')) {
    elem.style.display = 'none';
}