Why is JavaScript no removing my element when using .remove()?

Question

My javascript and html are definitely connected as i've run console.logs to test.

I have an onclick in my html which should run menu(). menu() is meant to remove my 'lanterns' element which is an image. However, nothing happens. There's no error either to help with debugging. I've also tried with the id for the parent #changetotext but I'm getting no response. I must be doing something fairly basic wrong.

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>

@MisterJojo- thank you, this combined with changing it to a button has worked. Really, really thankful for your help! — Lorna Roberts, Jun 21 '20 at 13:18

score 2 · Answer 1 · answered Jun 21 '20 at 12:48

2

Works fine

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>

answered Jun 21 '20 at 12:48

ebyte

1,469
2
17
32

whats the error ? code looks fine and working , img is getting removed from dom – LogicBlower Jun 21 '20 at 12:51
1

@ebyte Your code works fine but you also changed the link to a button element. Is that really necessary for a working solution? – viam0Zah Jun 21 '20 at 13:12
@viam0zah the button made a difference, as did removing the anchor which I didn't need in the first place – Lorna Roberts Jun 21 '20 at 13:17
@LornaRoberts no error . Your code is normal, if not, you can check the `f12` console – ebyte Jun 21 '20 at 13:20
@LornaRoberts my point was that it is not required to change the link to a button. Your problem can be solved with links as well -- it's up to you which element you want to use. – viam0Zah Jun 21 '20 at 14:03

mjcapecci · Answer 2 · 2020-06-21T12:59:18.970

1

Is this the exact code you're running? If so, you have to call menu() in the HTML with a button onclick - or you could do something like this in the script:

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

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

edited Jun 21 '20 at 12:59

answered Jun 21 '20 at 12:53

mjcapecci

21
1
3

viam0Zah · Answer 3 · 2020-06-21T14:04:27.410

Your onclick handler menu gets invoked well but you don't see the effect of it because it reloads the page immediately. Since you attach an onclick handler to a link, you also need to block the default action from happenning -- that is following the link's target (which is empty in this case and hence the self-reload).

Change your menu() function to the following:

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

And to recieve the triggered event's details, modify your onclick attribute like this:

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

Best practice

While the solution above will work as expected, assiging an onclick handler to an element directly from the markup is not recommended -- it is a better practice to separate behavour (JavaScript code) from structure (HTML).

I where you say `onclick="menu(event)"` it should be `onclick="menu"` since the event object is already being injected when the method is called — gabriel garcia, Jun 21 '20 at 13:12
@gabrielgarcia afaik this is true if you assign your onclick handler in JS. If you use the inline registration model, you explicitly need to pass the event object. https://www.quirksmode.org/js/events_access.html — viam0Zah, Jun 21 '20 at 13:22

score 0 · Answer 4 · answered Jun 21 '20 at 13:22

because your div with the onclick is inside a link <a ... whose function here is to reload the page

you have to stop the parent element action with [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>

Why is JavaScript no removing my element when using .remove()?

4 Answers4