JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<form action="/" id="form">
  <div class="input-block">
        <label class="output-field">Вопрос:</label>
        <textarea></textarea>
    </div>
    <div class="input-block">
        <label class="output-field">Ответ:</label>
        <textarea></textarea>
        <img src="https://ru.seaicons.com/wp-content/uploads/2016/09/Actions-dialog-close-icon.png" width="21" height="21" />
    </div>
</form>
<div class="container">
    <button class="insert_button">Добавить ответ</button>
</div>

JavaScript

function calculate()
{
  const labels = document.querySelectorAll(".label");
  answer_count--;
  var i=0;
  for (const label of labels)
  {
      i++;
      label.textContent= "Ответ"+i;
  }
}
 
function createElement()
 {
 const label = document.createElement("label");
 const input = document.createElement("textarea");
 const img = document.createElement("img");
 label.classList.add("label");
 label.textContent = "Ответ "+answer_count;
 answer_count++;
 input.setAttribute("type", "text");
 input.classList.add("input");
 
 img.classList.add("delete");
 img.height=21;
 img.width=21;
 img.src="https://ru.seaicons.com/wp-content/uploads/2016/09/Actions-dialog-close-icon.png";
 
 img.addEventListener("click", e => {
 e.preventDefault();
 const label = e.target.parentNode;
 const form = label.parentNode;
 form.removeChild(label);
 /* calculate() */;
 });
 label.appendChild(input);
 label.appendChild(img);
 return label;
 }
 

  const form = document.getElementById("form");
 const insertButton = document.querySelector(".insert_button");
 answer_count=1;
 insertButton.addEventListener("click", e => {
 e.preventDefault();
 const elem = createElement();
 form.appendChild(elem);
 });