1

Форма, в которой есть div с id="field", где addElement() добавляет элементы в div с id='content'. Мне нужно задействовать кнопки "Удалить" div c id="field" и "Добавить" такой же div после div c id="field".
Я не понимаю как сделать так, чтобы в новом диве кнопка "Удалить" удаляла div которому принадлежит.

<form>  
    <div id="field">
        <textarea placeholder="Заголовок поля"></textarea>
        <select id="selectBox" onchange="addElement();">
            <option value='textarea'>Один из списка</option>
            <option value='input'>Текст-строка</option>
        </select>
        <input type="submit" value="Удалить"><br>
        <div id='content'>

        </div>
    </div>
    <input type="submit" value="Добавить"><br><br>
</form>

1 ответ 1

1

function removeField(btn) {
  var div = btn.closest(".field");
  if (div) {
    div.remove();
  }
}

function addField(btn) {
  var form = btn.closest("form");
  if (form) {
    var div1 = form.querySelector(".field");
    if (div1) {
      var div = document.createElement("div");
      div.className = div1.className;
      div.innerHTML = div1.innerHTML;
      form.appendChild(div);
    }
  }
}
.field:first-child {
  display:none;
}
<form>  
    <div class="field">
        <textarea placeholder="Заголовок поля"></textarea>
        <select class="selectBox" onchange="addElement();">
            <option value='textarea'>Один из списка</option>
            <option value='input'>Текст-строка</option>
        </select>
        <input type="button" value="Удалить" onclick="removeField(this)"><br>
        <div class='content'>

        </div>
    </div>
    <input type="button" value="Добавить" onclick="addField(this)"><br><br>
</form>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.