使用 JavaScript 将代码块删除/添加到 HTML 表单答案

【问题标题】：Removing/Adding block of code to HTML form with JavaScript使用 JavaScript 将代码块删除/添加到 HTML 表单
【发布时间】：2015-12-17 01:11:54
【问题描述】：

我有一个 HTML 表单，在某一点上，有 3 个后续下拉菜单，其中包含使用 DB 查询动态生成的选项。我想让用户可以添加/删除一组这 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 逻辑，带有类行的内部 div 是三个下拉菜单的“集合”，而最内部的 3 个是3个下拉菜单。我想到的是在每个集合旁边添加一个按钮来删除集合本身，并添加一个只有一个按钮的新集合来生成一个新集合。我不认为生成集合会是一个大问题，因为这只是使用正确的 php 调用创建元素并将它们附加到“集合”div 的问题，但我不知道如何删除它们。我正在考虑使用

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

但是我不知道将什么传递给 removeChild，考虑到新集合将由 Javascript 生成，其 ID 或名称我无法预测，而且即使通过访问 childNodes 数组我也不会知道用户想要删除哪一组。

所以，我的问题是：这种方法会以任何方式起作用吗？有没有办法在移除按钮中识别“set” div 元素并将对象引用传递给 removeChild() 函数？

编辑：我一直在研究 indexOf 和 splice 函数，但是当在 element.children 或 element.ChildNodes 上调用它们时，它们不会被识别为函数。他们不返回数组吗？

【问题讨论】：

标签： javascript html forms twitter-bootstrap dom

【解决方案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

这将有效地删除代码中最后添加的（或仅在这种情况下）“set” div。

针对原问题提出的解决方案：

我最初想做的是为每个“设置” div 设置一个删除按钮，但在从删除按钮调用函数时我没有办法传递对象引用，因为 indexOf 在子节点或子节点数组。我现在意识到可以做的是：

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

【讨论】：