title: Why is JavaScript no removing my element when using .remove()?
body: <p>My javascript and html are definitely connected as i've run console.logs to test.</p>
  <p>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.</p>
  <pre><code>function menu(){
  var el = document.getElementById(&quot;lanterns&quot;);
  el.remove();
  
  };
  </code></pre>
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  
    &lt;title&gt;The Ludong Chinese Restaurant&lt;/title&gt;
    &lt;meta name=&quot;description&quot; content=&quot;The Ludong Chinese Restaurant&quot;&gt;
    &lt;meta name=&quot;author&quot; content=&quot;SitePoint&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css&quot; integrity=&quot;sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
     &lt;nav class=&quot;navbar navbar-expand-md bg-dark navbar-dark&quot; id=&quot;top-bar&quot;&gt;
          
          &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;The Ludong&lt;/a&gt;
         
          
        &lt;/nav&gt;
        &lt;div id=&quot;changetotext&quot;&gt;&lt;img src=&quot;https://res.cloudinary.com/dytmcam8b/image/upload/v1592684095/Chinese%20Restaurant/ludong.jpg&quot; 
        alt=&quot;red lanterns&quot; id=&quot;lanterns&quot;&gt;&lt;/div&gt;
          
    
  &lt;div class=&quot;padding1&quot;&gt;&lt;/div&gt;
  
    &lt;div class=&quot;bottom-menu d-flex flex-column flex-md-row justify-content-around flex-wrap&quot;&gt;
      &lt;a href=&quot;&quot;&gt;&lt;div class=&quot;p-2 menuChoice&quot; onclick=&quot;menu()&quot;&gt;Menu&lt;/div&gt;&lt;/a&gt;
      &lt;a href=&quot;&quot;&gt;&lt;div class=&quot;p-2 approach-choice&quot;&gt;Approach&lt;/div&gt;&lt;/a&gt;
        &lt;a href=&quot;&quot;&gt;&lt;div class=&quot;p-2 location-choice&quot;&gt;Location&lt;/div&gt;&lt;/a&gt;
          &lt;a href=&quot;&quot;&gt;&lt;div class=&quot;p-2 reservations-choice&quot;&gt;Reservations&lt;/div&gt;&lt;/a&gt;
            &lt;a href=&quot;&quot;&gt; &lt;div class=&quot;p-2 gifts-choice&quot;&gt;Gifts&lt;/div&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
   &lt;script src=&quot;myscripts.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>