当取消选中从 div javascript 中删除值时

如果你正在开发一个与表单相关的网页应用程序，那么用户可能需要从一个包含多个选项的 div 内取消选择其中一个选项。在这种情况下，你需要编写 JavaScript 代码来删除取消选择的选项的值。本文将向你介绍如何实现这一目标。

1. 使用事件监听器

你可以使用事件监听器来监控 div 中的选项是否被选中。当一个选项被取消选中，事件监听器将会调用一个 JavaScript 函数来删除该选项的值。

以下代码展示了如何使用事件监听器来为 div 中的所有选项添加 onclick 监听器：

const options = document.querySelectorAll('.option');
options.forEach((option) => {
  option.addEventListener('click', handleOptionClick);
});

function handleOptionClick(event) {
  const selected = event.currentTarget.classList.contains('selected');
  const value = event.currentTarget.dataset.value;
  
  if (selected) {
    // Remove the value from the list of selected values
    removeValue(value);
    // Unselect the option
    event.currentTarget.classList.remove('selected');
  } else {
    // Add the value to the list of selected values
    addValue(value);
    // Select the option
    event.currentTarget.classList.add('selected');
  }
}

function addValue(value) {
  // TODO: Implement function to add value to list
}

function removeValue(value) {
  // TODO: Implement function to remove value from list
}

2. 删除取消选择的选项的值

在 handleOptionClick 函数中，当选项被取消选择时，你需要调用 removeValue 函数来从选定的值列表中删除该选项的值：

function handleOptionClick(event) {
  const selected = event.currentTarget.classList.contains('selected');
  const value = event.currentTarget.dataset.value;
  
  if (selected) {
    // Remove the value from the list of selected values
    removeValue(value);
    // Unselect the option
    event.currentTarget.classList.remove('selected');
  } else {
    // Add the value to the list of selected values
    addValue(value);
    // Select the option
    event.currentTarget.classList.add('selected');
  }
}

function removeValue(value) {
  const selectedValues = getSelectedValues();
  const index = selectedValues.indexOf(value);
  if (index !== -1) {
    selectedValues.splice(index, 1);
  }
  // TODO: Update the UI to reflect the change in selected values
}

function getSelectedValues() {
  // TODO: Return an array of selected values
}

3. 更新 UI

在调用 removeValue 函数后，你需要更新 UI，以反映选定的值的更改。在这种情况下，你可能需要在页面上显示选定值的列表。你可以将一个数组作为参数传递给一个函数来更新列表：

function removeValue(value) {
  const selectedValues = getSelectedValues();
  const index = selectedValues.indexOf(value);
  if (index !== -1) {
    selectedValues.splice(index, 1);
  }
  updateSelectedValues(selectedValues);
}

function updateSelectedValues(values) {
  const list = document.querySelector('.selected-values');
  list.innerHTML = '';
  values.forEach((value) => {
    const li = document.createElement('li');
    li.textContent = value;
    list.appendChild(li);
  });
}

在以上代码中，updateSelectedValues 函数接受一个值数组作为参数，并使用该数组创建一个包含所有选定值的列表。最后，它将该列表添加到选定值的 div 中。

结论

在你的 JavaScript 代码中添加事件监听器，使用添加、删除等一系列函数来管理被用户选择的值，更新其 UI上的显示，这就是在取消选中从 div javascript 中删除值的整个过程。希望这篇文章能够帮助你理解如何在你的网站应用程序中实现这些功能。