Блог

Я пытаюсь добиться следующего:

• Пользователь может выбрать имя ресурса из списка данных.
• Выбранное имя ресурса будет создано в другом каталоге.
• В то же время имя ресурса должно быть удалено из исходного списка данных. Просто для того, чтобы пользователь не мог снова выбрать одно и то же имя ресурса.

Я использовал следующий HTML-код:

 lt;div class="container-client"gt; lt;form action="#"gt;  lt;div class="user-details"gt;  lt;div class="input-box"gt;  lt;span class="details"gt;Collaborateurslt;smallgt;*lt;/smallgt;lt;/spangt;  lt;input type="text" placeholder="Selectionner un collaborateur" list="resource-list" required autocomplete="off" id="candidate"gt;  lt;datalist id="customer-list"gt;  lt;option value="Alex"gt;Menuisierlt;/optiongt;  lt;option value="Peter"gt;Charpentierlt;/optiongt;  lt;option value="Alain"gt;Ingénieur bétonlt;/optiongt;  lt;option value="Adam"gt;Placolt;/optiongt;  lt;/datalistgt;  lt;/divgt;  lt;div class="button-plus"gt;  lt;input type="button" value=" " onClick="addResource();"gt;  lt;/divgt;  lt;/divgt;  lt;/formgt;  lt;hrgt;  lt;form action="index.html"gt;  lt;div class="user-details"gt;  lt;div class="input-box"gt;  lt;span class="details"gt;Mon équipe:lt;/spangt;  lt;/divgt;  lt;div class="new-box" id="dynamic-list"gt;    lt;/divgt;  lt;div class="new-box"gt;  lt;div class="button"gt;  lt;input type="submit" value="✔"gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/formgt;  lt;/divgt;  

Вот ниже код 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-resources.js:20 Неперехваченное исключение DOMException: Не удалось выполнить «removeChild» на «Узле»: Узел, подлежащий удалению, не является дочерним по отношению к этому узлу». Указывает, что проблема возникает в следующей строке JS: generic_list.removeChild(кандидат);

Не могли бы вы помочь порекомендовать решение? Заранее спасибо.

Прежде всего, в коде вы указали resource-list и customer-list выглядите так, как будто это должно быть одно и то же. В теге ввода customer-list используется значение, а в resource-list списке данных используется значение. Я догадался , что и то, и другое должно быть resource-list , чтобы правильно их связать.

Похоже, вы пытаетесь получить элемент списка данных, на который вы нажали. В коде, как это происходит сейчас, вы удаляете lt;inputgt; тег в качестве candidate переменной. Если бы вы удалили это, все поле ввода исчезло бы, и ошибка вызвана тем, что это поле ввода не является дочерним generic_list по отношению к переменной.

Теперь, чтобы решить эту проблему, вы можете использовать document.querySelector() функцию для получения выбранного элемента списка данных. Следующее изменение в вашем коде будет иметь желаемый эффект:

 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() функцию, которая гарантирует, что любое имя со специальными символами будет правильно экранировано в этой строке.