Как добавить и удалить блок div?

153

26 августа 2019, 16:10

Форма, в которой есть 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>

Answer 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>