Удаление/добавление блока кода в HTML-форму с помощью JavaScript

Question

У меня есть форма HTML с одним из следующих 3-х выпадающих меню с опцией, динамически сгенерированной с помощью запросов БД. Я хотел бы дать пользователю возможность добавлять/удалять набор из этих трех меню, чтобы они могли устанавливать более одного значения за раз, но я не знаю, как структурировать код JavaScript для кнопок добавления/удаления , HTML код формы теперь выглядит следующим образом:

<div id="valori"> 
    <div class="form-group row"> 
     <?php 
     $con = mysqli_connect("localhost", "root", NULL) or die("Connection Failed"); 
     mysqli_select_db($con, "tag-it")or die("Connection Failed"); 
     $query = "SELECT * FROM tipologie"; 
     $result = mysqli_query($con, $query); ?> 
     <div class="col-lg-4"> 
      <h4>Tipologia Prodotto:</h4> 
      <select class="form-control" name="tipologia" onchange="listacampi(this.options[this.selectedIndex].value);" required> 
      <option value="blank"></option> 
      <?php while ($line = mysqli_fetch_array($result, MYSQL_ASSOC)) { ?> 
      <option value="<?php echo $line['ID Tipologia'];?>"> <?php echo $line['Nome'];?> </option> 
      <?php } ?> 
      </select> 
     </div> 
     <div class="col-lg-4"> 
      <h4>Sotto-tipologia:</h4> 
      <select class="form-control" name="campi" onchange="listavalori(this.options[this.selectedIndex].value);" required> 
      <option value="blank"></option> 
      </select> 
     </div> 
     <div class="col-lg-4"> 
      <h4>Valore:</h4> 
      <input id="valoriAuto" name="valori" class="form-control" list="mylist" required> 
      <datalist id="mylist"> 
      </datalist> 
     </div> 
    </div> 
</div> 

Здесь, внешний DIV только что был добавлен, потому что я думаю, что я мог бы использовать его для логики Javascript, внутренний один с классом подряд является «установить» из трех выпадающих меню и 3 самых внутренних - 3 раскрывающихся меню. Что я думал о добавлении кнопки рядом с каждым набором, чтобы удалить сам набор, и добавить новый набор только с помощью кнопки для создания нового. Я не думаю, что создание набора было бы большой проблемой, потому что это просто вопрос создания элементов с правильными вызовами php и добавления их в «set» div, но я не знаю, как их удалить. Я думал об использовании

document.getElementById("valori").removeChild() 

Но тогда я не знал бы, что перейти к RemoveChild, учитывая тот факт, что новые наборы будут порожденной Javascript с ID или именем, которое я не мог предсказать, и что даже путем доступа к массиву childNodes я бы не знал, какой из наборов пользователь хочет удалить.

Итак, мой вопрос: может ли этот подход работать в любом случае? Есть ли способ идентифицировать элемент «set» div в кнопке удаления и передать ссылку объекта на функцию removeChild()?

EDIT: Я искал функции indexOf и splice, но они не распознаются как функции при вызове element.children или element.ChildNodes. Разве они не возвращают массивы?

Answer 1

Я решил немного изменить логику того, что я собираюсь делать, поэтому я опубликую свой ответ в связи с этим, но я также дам идею о том, как решить исходную проблему. Теперь у меня есть только одна кнопка «удалить», независимо от количества «наборов», которые пользователь создаст, и нажатие кнопки приведет к удалению последнего добавленного набора. Что я делаю:

<div> 
    <input style="button" class="btn btn-warning btn-circle" onclick="javascript:document.getElementById('valori').removeChild(document.getElementById('valori').children[document.getElementById('valori').children.length-2])"> 
     <i class="fa fa-times"> 
      ::before 
     </i> 
    </input> 
</div> 

Обратите внимание на функции OnClick:

document.getElementById('valori').removeChild(document.getElementById('valori').children[document.getElementById('valori').children.length-2]) 
      ^This gets the outer div 
           ^Calls the function 
                               ^the index will be the length of the children array-2, because the last child is the button itself 

Это позволит эффективно удалить последний добавленный (или только, если это так) «установите» DIV в коде.

---

Предлагаемое решение исходной задачи:

То, что я хотел сделать изначально имеющий кнопку удаления для каждого «набор» DIV, но я не имел способ передать ссылку на объект, когда вызов функции из кнопки удаления, потому что indexOf не будет работать с массивами children или childNode. Теперь я понял, что можно сделать следующее:

onclick="javascript: document.getElementById('valori').removeChild(this.parentNode.parentNode)"