Question

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

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

但后来我不知道要传递给removeChild的内容，考虑到新的集合将由具有我无法预测的ID或名称的Javascript生成，即使访问childNodes数组我也不会知道用户想要移除哪一组。

所以，我的问题是：这种方法是否会以任何方式发挥作用？有没有办法在remove按钮中标识“set”div元素并将对象引用传递给removeChild（）函数？

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

Answer 1

我决定略微修改我将要做的事情的逻辑，所以我会发布我的答案，但我也会提出如何解决问题的想法。原始问题。我现在正在做的只有一个＆＃34;删除＆＃34;按钮，无论＆＃34;套数＆＃34;用户将创建，单击该按钮将删除最后添加的集。我所做的是：

<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

这将有效地删除最后添加的（或者只有，如果是这样的话）＆＃34; set＆＃34;代码中的div。

针对原始问题的建议解决方案：

我最初想要做的是为每个＆＃34;设置＆＃34; div，但是当从delete按钮调用函数时，我没有办法传递对象引用，因为indexOf不会对children或childNode数组起作用。我现在意识到可以做的是：

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

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

1 个答案: