从dataset中删除选项项

Question

我正努力做到以下几点：

• 用户可以从datalist中选择一个资源名。
• 所选的资源名将在另一个div.
• 中创建，同时，资源名称应从原始数据列表中删除。防止用户再次选择相同的资源名称.

我使用了以下HTML代码：

<div class="container-client">
<form action="#">
    <div class="user-details">
        <div class="input-box">
            <span class="details">Collaborateurs<small>*</small></span>
                <input type="text" placeholder="Selectionner un collaborateur" list="resource-list" required autocomplete="off" id="candidate">
                    <datalist id="customer-list">
                          <option value="Alex">Menuisier</option>
                          <option value="Peter">Charpentier</option>
                          <option value="Alain">Ingénieur béton</option>
                          <option value="Adam">Placo</option>
                    </datalist>
                </div>
                <div class="button-plus">
                    <input type="button" value="+" onClick="addResource();">
                </div>
            </div>
        </form>
        <hr>
        <form action="index.html">
            <div class="user-details">
                <div class="input-box">
                    <span class="details">Mon équipe:</span>
                </div>
                <div class="new-box" id="dynamic-list">
                                    
                </div>
                <div class="new-box">
                    <div class="button">
                        <input type="submit" value="✔">
                    </div>
                </div>
            </div>
        </form>
    </div>

下面是我尝试使用的JS代码；将资源名称添加到div中可以很好地工作，但是删除资源名不起作用。

function addResource()
{
    var new_team_member = document.getElementById ('dynamic-list');
    var generic_list = document.getElementById ('resource-list');
    var candidate = document.getElementById("candidate");
    if (candidate.value =='')
    {
        alert('No data selected');
    }
    else
    {
        var div = document.createElement("div");
        div.setAttribute('class','input-box');
        var input = document.createElement("input");
        input.setAttribute('type','text');
        input.setAttribute('placeholder',candidate.value);
        input.setAttribute('disabled','disabled');
        div.appendChild(input);
        new_team_member.appendChild(div);
        generic_list.removeChild(candidate);
        document.getElementById('candidate').value = '';
    }
}

我得到的错误消息是“add es.js:20 Uncaught :未能在‘node’上执行'removeChild‘：要删除的节点不是该节点的子节点。”指示引起问题的JS行如下：generic_list.removeChild(candidate);

你能帮我推荐一个解决方案吗。提前谢谢。

Answer 1

首先，在代码中，您提供了resource-list和customer-list看起来应该是相同的东西。在输入标记中，使用customer-list，在datalist中使用resource-list。为了正确地链接它们，我猜这两者都应该是resource-list。

看起来您正在尝试获取您单击的datalist项。在代码中，就像现在一样，您将<input>标记作为您的candidate变量删除。如果要删除该字段，则整个输入字段将消失，错误是由于此输入字段不是generic_list变量的子字段而引起的。

现在，为了解决这个问题，您可以使用document.querySelector()函数来获取所选的datalist项。对代码的下列更改将产生预期的效果：

function addResource()
{
    var new_team_member = document.getElementById ('dynamic-list');
    var generic_list = document.getElementById ('resource-list');
    var candidate = document.getElementById("candidate");
    if (candidate.value =='')
    {
        alert('No data selected');
    }
    else
    {
        var div = document.createElement("div");
        div.setAttribute('class','input-box');
        var input = document.createElement("input");
        input.setAttribute('type','text');
        input.setAttribute('placeholder',candidate.value);
        input.setAttribute('disabled','disabled');
        div.appendChild(input);
        new_team_member.appendChild(div);

        // Get datalist item with selected candidate
        datalist_item = document.querySelector('#resource-list option[value="'+CSS.escape(candidate.value)+'"]');
        // Remove item from list
        generic_list.removeChild(datalist_item);

        document.getElementById('candidate').value = '';
    }
}

此查询选择器允许您使用CSS类似的语法来选择元素。在字符串'#resource-list option[value="'+CSS.escape(candidate.value)+'"]'中，它首先查找资源列表，然后接受带有候选名称的选项标记作为其值。

为了安全起见，我还使用了CSS.escape()函数，以确保任何具有特殊字符的名称都能在此字符串中正确转义。