为什么JavaScript在使用。remove（）时不删除我的元素？

提问者：小点点

为什么JavaScript在使用。remove（）时不删除我的元素？

我的javascript和html肯定是连接在一起的，因为我运行了console.logs进行测试。

我的html中有一个onclick，它应该运行menu（）。 menu（）的意思是删除我的'lanterns'元素，它是一个图像。然而，什么也没发生。也没有错误可以帮助调试。我还尝试使用父项#changeTotext的id，但没有得到任何响应。我一定是做了一些相当基本的错误。

function menu(){
var el = document.getElementById("lanterns");
el.remove();

};

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>The Ludong Chinese Restaurant</title>
  <meta name="description" content="The Ludong Chinese Restaurant">
  <meta name="author" content="SitePoint">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>

   <nav class="navbar navbar-expand-md bg-dark navbar-dark" id="top-bar">
        
        <a class="navbar-brand" href="#">The Ludong</a>
       
        
      </nav>
      <div id="changetotext"><img src="https://res.cloudinary.com/dytmcam8b/image/upload/v1592684095/Chinese%20Restaurant/ludong.jpg" 
      alt="red lanterns" id="lanterns"></div>
        
  
<div class="padding1"></div>

  <div class="bottom-menu d-flex flex-column flex-md-row justify-content-around flex-wrap">
    <a href=""><div class="p-2 menuChoice" onclick="menu()">Menu</div></a>
    <a href=""><div class="p-2 approach-choice">Approach</div></a>
      <a href=""><div class="p-2 location-choice">Location</div></a>
        <a href=""><div class="p-2 reservations-choice">Reservations</div></a>
          <a href=""> <div class="p-2 gifts-choice">Gifts</div></a>
  </div>
</div>


 <script src="myscripts.js"></script>
  </body>
</html>

共3个答案

匿名用户

工作良好

null

function remove (){
var el = document.getElementById("lanterns");
el.remove();
}

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>The Ludong Chinese Restaurant</title>
  <meta name="description" content="The Ludong Chinese Restaurant">
  <meta name="author" content="SitePoint">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <button onclick="remove()">remove</button>

    <nav class="navbar navbar-expand-md bg-dark navbar-dark" id="top-bar">
        
        <a class="navbar-brand" href="#">The Ludong</a>
       
        
      </nav>
      <div id="changetotext"><img src="https://res.cloudinary.com/dytmcam8b/image/upload/v1592684095/Chinese%20Restaurant/ludong.jpg" 
      alt="red lanterns" id="lanterns"></div>
     
        
  </body>
</html>

匿名用户

这就是你运行的代码吗？如果是这样，您必须在HTML中调用menu()，并使用按钮onclick-或者您可以在脚本中执行如下操作:

button.addEventListener('click', () => menu());

function menu() {
  el.remove();
}

匿名用户

您的onclick处理程序菜单可以很好地调用，但是您没有看到它的效果，因为它会立即重新加载页面。由于您将onclick处理程序附加到链接，您还需要阻止默认操作的发生--即跟随链接的目标（在本例中为空，因此是自重新加载）。

将菜单()功能更改为以下内容:

function menu(e) {
    e.preventDefault();
    var el = document.getElementById("lanterns");
    el.remove();
};

要接收触发事件的详细信息，请修改onclick属性，如下所示:

<a href=""><div class="p-2 menuChoice" onclick="menu(event)">Menu</div></a>

最佳做法

虽然上面的解决方案将按预期工作，但不建议将onclick处理程序直接归属于标记中的元素--将行为（JavaScript代码）与结构(HTML)分离是更好的实践。