Question

当我运行console.logs进行测试时，我的javascript和html肯定已连接。

我的html中有一个onclick，应运行menu（）。 menu（）用于删除图像中的“灯笼”元素。但是，什么也没有发生。也没有错误可以帮助调试。我也尝试使用父级#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>

Answer 1

工作正常

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>

Answer 2

这是您正在运行的确切代码吗？如果是这样，您必须使用按钮menu()在HTML中调用onclick-否则您可以在脚本中执行以下操作：

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

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

Answer 3

您的onclick处理程序menu得到了很好的调用，但是您看不到它的效果，因为它会立即重新加载页面。由于您将onclick处理程序附加到链接上，因此还需要block the default action from happenning-它遵循链接的目标（在这种情况下为空，因此会自动重载）。

将您的menu()函数更改为以下内容：

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）分开。

Answer 4

因为带有onclick的div位于链接<a ...内，其作用是重新加载页面

您必须使用[event] .stopPropagation（）;停止父元素操作。

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

a > div { cursor: pointer }

<a ref="" ><div onclick="menu(event)">click here to remove lanterns </div> </a>
<br>
<div id="lanterns">lanterns</div>

为什么使用.remove（）时JavaScript无法删除我的元素？

4 个答案: