javascript - 删除表单中的多个按钮并将其替换为 JavaScript 中点击时的文本框

Question

因此，经过大量的点击和尝试，我已经能够在单击表单中的回复按钮时添加文本区域。我无法做的是，一旦在表单中单击特定的回复按钮，只有该特定表单的按钮消失并仅替换为文本区域。现在按钮消失了，但文本区域永远不会出现在它们的位置。因此要求是；

1. 当单击回复按钮时，所有 3 个按钮应该仅针对该特定表单消失，并在其位置出现一个文本区域。保存和删除按钮不应该执行任何操作，因为我稍后将为其功能单独添加 Django。

2. 如果单击不同表单中的另一个回复按钮，则应对该表单执行 (1)，而之前执行过 (1) 的表单应返回到其起始状态，即没有文本区域并且只有 3 个按钮。

3. 解决方案必须仅使用 Vanilla JS。请不要在 jQuery 或任何其他库中提供解决方案。初学者 JS，因此 jQuery 超出了我的能力范围。

我的代码是:

// Select all the reply buttons...
var replyBtns = document.querySelectorAll('button.rep');
// Attach an event listener to each...
for (var i = 0; i < replyBtns.length; i++) {
  replyBtns[i].addEventListener('click', function(e) {
    // Prevent submitting the form
    e.preventDefault();
    //remove save and delete buttons from that form only
    this.parentNode.parentNode.removeChild(this.parentNode);
    // Remove the textarea from the page if it exists
    var textarea = document.getElementById("reply-message");
    if (textarea) {
      textarea.parentNode.removeChild(textarea);
    }
    // Create the textarea and insert it in the form, right before the reply button
    var replyBox = document.createElement('textarea');
    replyBox.setAttribute('id', 'reply-message');
    this.parentNode.insertBefore(replyBox, this);
  }, false);
}

textarea#reply-message {
  display: block;
}

<div class="margin clb">
  <h2>comment 1</h2>
  <form id="myForm" method='POST' action="/" aria-live="polite">
    <button id="reply" type="submit" class="rep btn bcg bm mts mbl">reply</button>
    <button id="save" type="submit" class="rep btn bcg bm mts mbl">save</button>
    <button id="delete" type="submit" class="rep btn bcg bm mts mbl">delete</button>
    <br>
  </form>

  <h2>comment 2</h2>
  <form id="myForm" method='POST' action="/" aria-live="polite">
    <button id="reply" type="submit" class="rep btn bcg bm mts mbl">reply</button>
    <button id="save" type="submit" class="rep btn bcg bm mts mbl">save</button>
    <button id="delete" type="submit" class="rep btn bcg bm mts mbl">delete</button>
    <br>

  </form>

  <h2>comment 3</h2>
  <form id="myForm" method='POST' action="/" aria-live="polite">
    <button id="reply" type="submit" class="rep btn bcg bm mts mbl">reply</button>
    <button id="save" type="submit" class="rep btn bcg bm mts mbl">save</button>
    <button id="delete" type="submit" class="rep btn bcg bm mts mbl">delete</button>
    <br>

  </form>

  <h2>comment 4</h2>
  <form id="myForm" method='POST' action="/" aria-live="polite">
    <button id="reply" type="submit" class="rep btn bcg bm mts mbl">reply</button>
    <button id="save" type="submit" class="rep btn bcg bm mts mbl">save</button>
    <button id="delete" type="submit" class="rep btn bcg bm mts mbl">delete</button>
    <br>

  </form>

  <h2>comment 5</h2>
  <form id="myForm" method='POST' action="/" aria-live="polite">
    <button id="reply" type="submit" class="rep btn bcg bm mts mbl">reply</button>
    <button id="save" type="submit" class="rep btn bcg bm mts mbl">save</button>
    <button id="delete" type="submit" class="rep btn bcg bm mts mbl">delete</button>
    <br>

  </form>
</div>

Answer 1

this.parentNode.parentNode.removeChild(this.parentNode);

在这里您删除 <form>来自 DOM。

this.parentNode.insertBefore(replyBox, this);

在这里，您将回复框添加为 <form> 的子项，在单击 <button> 之前。但整个<form>已被删除，因此回复框永远不会出现。

此外，请勿使用重复的 ID。这会在以后引起令人困惑的问题。

您可以向 <form> 添加一个类，而不是手动在 DOM 中添加和删除元素。并关闭按钮和回复框的可见性:

var replyBtns = document.querySelectorAll('button.rep');
for (var i = 0; i < replyBtns.length; i++) {
  replyBtns[i].addEventListener('click', function(e) {
    e.preventDefault();

    // Remove the 'replying' class from all forms on the page...
    document.querySelectorAll('form')
      .forEach(e => e.classList.remove('replying'));

    // ...and add it to the specific form that was clicked
    e.target.closest('form').classList.add('replying');
  }, false);
}

/* reply-message textboxes are hidden by default */
textarea.reply-message {
  display: none;
}

/* but they're visible in 'replying' forms */
form.replying textarea.reply-message {
  display: block;
}

/* 'replying' form buttons are hidden */
form.replying button {
  display: none;
}

<div class="margin clb">
  <h2>comment 1</h2>
  <form method='POST' action="/" aria-live="polite">
    <button type="submit" class="reply rep btn bcg bm mts mbl">reply</button>
    <button type="submit" class="save rep btn bcg bm mts mbl">save</button>
    <button type="submit" class="delete rep btn bcg bm mts mbl">delete</button>
    <textarea class="reply-message"></textarea>
    <br>

  </form>

  <h2>comment 2</h2>
  <form method='POST' action="/" aria-live="polite">
    <button type="submit" class="reply rep btn bcg bm mts mbl">reply</button>
    <button type="submit" class="save rep btn bcg bm mts mbl">save</button>
    <button type="submit" class="delete rep btn bcg bm mts mbl">delete</button>
    <textarea class="reply-message"></textarea>
    <br>

  </form>

  <h2>comment 3</h2>
  <form method='POST' action="/" aria-live="polite">
    <button type="submit" class="reply rep btn bcg bm mts mbl">reply</button>
    <button type="submit" class="save rep btn bcg bm mts mbl">save</button>
    <button type="submit" class="delete rep btn bcg bm mts mbl">delete</button>
    <textarea class="reply-message"></textarea>
    <br>

  </form>

  <h2>comment 4</h2>
  <form method='POST' action="/" aria-live="polite">
    <button type="submit" class="reply rep btn bcg bm mts mbl">reply</button>
    <button type="submit" class="save rep btn bcg bm mts mbl">save</button>
    <button type="submit" class="delete rep btn bcg bm mts mbl">delete</button>
    <textarea class="reply-message"></textarea>
    <br>

  </form>

  <h2>comment 5</h2>
  <form method='POST' action="/" aria-live="polite">
    <button type="submit" class="reply rep btn bcg bm mts mbl">reply</button>
    <button type="submit" class="save rep btn bcg bm mts mbl">save</button>
    <button type="submit" class="delete rep btn bcg bm mts mbl">delete</button>
    <textarea class="reply-message"></textarea>
    <br>

  </form>
</div>