选择特定选项时移除DOM元素及admin值控制tags-input显隐的实现

没问题，我来帮你搞定这个需求！核心思路就是监听下拉框的change事件，根据选中的选项值来动态操作DOM元素——移除或者重新挂载目标tags-input。

第一步：准备基础HTML结构 #

假设你的页面结构大概是这样的：

<select id="admin-select">
  <option value="0">普通用户</option>
  <option value="1">Admin（隐藏Tags）</option>
  <option value="2">Admin（显示Tags）</option>
</select>

<div class="tags-container">
  <div id="tags-input">
    <!-- 这里是你的Tags输入框内容 -->
    <input type="text" placeholder="输入标签..." />
  </div>
</div>

第二步：编写JavaScript逻辑 #

咱们需要先保存好tags-input的引用和它的父容器，这样移除后还能轻松恢复，而不用重新创建元素。代码如下：

// 获取关键元素
const adminSelect = document.getElementById('admin-select');
const tagsInput = document.getElementById('tags-input');
const tagsContainer = tagsInput.parentElement;
// 保存tags-input的原始位置（用nextSibling来记录，方便后续插回正确位置）
const originalSibling = tagsInput.nextSibling;

// 监听下拉框变化事件
adminSelect.addEventListener('change', function() {
  const selectedValue = this.value;
  
  switch(selectedValue) {
    case '1':
      // 选中值为1时，从DOM中移除tags-input
      if (tagsInput.parentNode) {
        tagsInput.remove();
      }
      break;
    case '2':
      // 选中值为2时，重新挂载tags-input到原来的位置
      if (!tagsInput.parentNode) {
        tagsContainer.insertBefore(tagsInput, originalSibling);
      }
      break;
    default:
      // 其他选项可以根据需求处理，比如默认显示tags-input
      if (!tagsInput.parentNode) {
        tagsContainer.insertBefore(tagsInput, originalSibling);
      }
      break;
  }
});

关键细节说明 #

• 保存原始引用：我们提前存了tags-input的父容器和它的下一个兄弟节点，这样恢复的时候能精准插回原来的位置，避免破坏页面布局。
• 判断元素状态：每次操作前先检查tagsInput.parentNode，避免重复移除或添加导致的错误。
• 灵活扩展：如果还有其他选项需要处理，直接在switch里加case就行。

这样就能完美实现你要的效果啦——选Admin1时tags-input从DOM里消失，选Admin2时又回来～

内容的提问来源于stack exchange，提问作者TheBAST