如何基于条件动态增删li标签？jQuery代码失效求助

看起来你的代码有几个关键问题导致无法正常运行，我帮你梳理并给出修复方案：

问题分析 #

1. 字符串值的判断逻辑错误：隐藏输入框返回的value是字符串类型的"true"或"false"，直接用if(override)的话，哪怕值是"false"，因为它是非空字符串，会被JavaScript判定为true，导致逻辑完全相反。
2. 未等待DOM加载完成：如果你的JS代码直接写在页面顶部或者DOM元素之前，执行代码时#override和ul.nav这些元素还没被浏览器渲染出来，自然找不到目标元素。
3. 选择器与目标元素不匹配：你要移除的是<li>标签，但选择器$('#overridecanges')选中的是里面的<a>标签；另外原代码里已经存在一个Researcher标签，重复添加会导致标签冗余。

修正后的完整代码 #

场景1：根据override值添加/移除新的标签页（比如添加名为"Override Changes"的专属标签） #

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home" class="tab-heading">Person</a></li>
  <li><a data-toggle="tab" href="#menu1" class="tab-heading">Provider</a></li>
  <li><a data-toggle="tab" href="#menu2" class="tab-heading">Researcher</a></li>
  <li style='float: right;'>
    <button type="button" id="saveall" class="btn btn-primary save-btn">Save</button>
  </li>
</ul>
<input type="hidden" name="override" id="override" value="true">

<script>
// 等待DOM完全加载后再执行操作，确保能找到所有元素
$(document).ready(function() {
  // 严格判断字符串值，转为布尔逻辑
  const isOverride = $('#override').val() === "true";
  const $navTabs = $('ul.nav.nav-tabs');
  // 给动态添加的li设置唯一ID，方便后续精准移除
  const overrideTabId = "override-tab";

  if (isOverride) {
    // 添加新标签页（注意href要对应页面中存在的tab内容容器，这里假设是#override-content）
    $navTabs.append(`<li id="${overrideTabId}"><a data-toggle="tab" href="#override-content" class="tab-heading">Override Changes</a></li>`);
  } else {
    // 直接移除对应的li标签，而不是内部的a标签
    $(`#${overrideTabId}`).remove();
  }
});
</script>

场景2：根据override值控制现有Researcher标签的显示/隐藏 #

如果你实际需求是控制原有Researcher标签的显示状态，而非添加新标签，可以这样写：

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home" class="tab-heading">Person</a></li>
  <li><a data-toggle="tab" href="#menu1" class="tab-heading">Provider</a></li>
  <!-- 给目标li添加唯一ID，方便快速选择 -->
  <li id="researcher-tab"><a data-toggle="tab" href="#menu2" class="tab-heading">Researcher</a></li>
  <li style='float: right;'>
    <button type="button" id="saveall" class="btn btn-primary save-btn">Save</button>
  </li>
</ul>
<input type="hidden" name="override" id="override" value="true">

<script>
$(document).ready(function() {
  const isOverride = $('#override').val() === "true";
  const $researcherTab = $('#researcher-tab');

  if (isOverride) {
    $researcherTab.show();
  } else {
    $researcherTab.hide();
  }
});
</script>

额外小提示 #

• 注意拼写规范：你的代码里overridecanges应该是overrideChanges，虽然不影响功能，但规范命名能大幅提升代码可维护性。
• 如果使用Bootstrap标签页，添加新标签后要确保对应的tab-pane容器存在，否则点击标签不会显示对应内容。

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