CODEWITHSUNDEEP
javascriptonclick
Lorna Roberts
Lorna Roberts

Reputation: 33

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

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>

Upvotes: 0

Views: 1199

Answers (4)

viam0Zah
viam0Zah

Reputation: 26312

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).

Upvotes: 1

Mister Jojo
Mister Jojo

Reputation: 22265

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>

Upvotes: 0

mjcapecci
mjcapecci

Reputation: 21

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();
}

Upvotes: 1

ebyte
ebyte

Reputation: 1517

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>

Upvotes: 2

Related Questions