对如何删除 HTML 下拉项元素感到困惑

Question

我正在尝试根据网页上的用户登录状态创建动态菜单。这是 HTML 页面 (Bootstrap 4) 上的代码：

     <div class="dropdown" id="account_info">
      <button type="button" class="btn btn-elegant" id="dropdownMenuButton" data-toggle="dropdown"><i class="icon-user-circle"></i>  User</button>
      <div class="dropdown-menu" id="drop_down">

      </div>
     </div>

以及创建“登录”的代码 link 或如果用户已经 'signed in' 则删除 link:

var _status = vitals.dataset.user;  //retrieve passed 'cookie' information...
var _log_status = sessionStorage.getItem("logged");

  if (_status != "none") {
   if ((_log_status === null) || (_log_status === "undefined")) { 
   elem = document.getElementById("account_in");
   elem.parentNode.removeChild(elem);  //remove 'login' item
   sessionStorage.setItem("logged", "login"); 
   }  //user has 'signed in' for the initial time...
  } else {
  elem_set = document.createElement("a");
  elem_set.className = "drop-down-item";
  elem_set.id = "account_in";
  elem_set.appendChild(document.createTextNode("Login"));
  document.getElementById("drop_down").appendChild(elem_set); 
  }  //"user" cookie has passed...OR NOT...

如果用户不是 'signed in'，在下拉菜单中创建“登录”link 的代码工作正常（在 'else' 语句中）。但是，当用户 'signed in' 时会抛出错误。错误是“Uncaught TypeError: Cannot read 属性 'parentNode' of null”在读取“elem.parentNode.removeChild(elem)”的行中。

我不明白为什么“account_in”的 ID 报告为 'null'，因为我创建了该元素属性...或者此错误是否指的是其他内容？非常感谢任何建议。

Answer 1

我在下面创建了一个代码片段，这样我就可以运行你的代码了。我没有 vitals 库，所以我将其注释掉并只使用了一个静态值。另外这不会让我使用 sessionStorage 所以我再次使用静态值。

比较 _log_status === "undefined" 时出错 - 我很确定你的意思是 typeof _log_status === "undefined"

我还添加了我在评论中描述的 if 语句。

如果这仍然不是您所需要的，请在上面的问题中添加一个运行nable 片段。

var _status = 'Pangit'; //vitals.dataset.user;  //retrieve passed 'cookie' information...
var _log_status;  //sessionStorage.getItem("logged");

if (_status != "none") {
  if ((_log_status === null) || (typeof _log_status === "undefined")) { 
    elem = document.getElementById("account_in");
    
    // if _status != none and _log_status is undefined, elem will not exist
    if (elem) { 
      elem.parentNode.removeChild(elem);  //remove 'login' item
    }

    //sessionStorage.setItem("logged", "login"); 
  }  //user has 'signed in' for the initial time...
} else {
  elem_set = document.createElement("a");
  elem_set.className = "drop-down-item";
  elem_set.id = "account_in";
  elem_set.appendChild(document.createTextNode("Login"));
  document.getElementById("drop_down").appendChild(elem_set); 
}  //"user" cookie has passed...OR NOT...

     <div class="dropdown" id="account_info">
      <button type="button" class="btn btn-elegant" id="dropdownMenuButton" data-toggle="dropdown"><i class="icon-user-circle"></i>  User</button>
      <div class="dropdown-menu" id="drop_down">

      </div>
     </div>

对如何删除 HTML 下拉项元素感到困惑

confusion on how to remove an HTML dropdown item element

javascript

dropdown

bootstrap-4