title: How to remove message event handler in javascript. Event not closing and duplicating
body: <p>I am creating a script for a custom menu with clickable buttons that can be used for either opening new windows with new buttons or placing functions behind buttons for playing music in-game etc.</p>
  <p>The problem I am facing is that whenever you close the menu by clicking on the &quot;Close&quot; button and opening the menu again, the event is executed twice. When you repeat this, it happens 4 times, then 8, and so on. It seems that it &quot;add event handler&quot; is not closed and when the menu is opened again, a new handler is created. Now we have all these events running, and doing the same thing duplicating everything.</p>
  <p>This is the code from Javascript.</p>
  <pre><code>window.addEventListener('message', function(event) {
  
    MenuName = event.data.MenuName
    MenuTitle = event.data.MenuTitle
    MenuOptions = event.data.MenuOptions
  
    if (MenuName == 'MainMenu') {
      $('#npc-header').html(MenuTitle);
      for (let i = 0; i &lt; MenuOptions.length; i++) {
        if (i &lt;= 6) {
          $(&quot;#option&quot; + i).show();
          $(&quot;#option&quot; + i).html(MenuOptions[i].Title);
          $(document).on('click', &quot;#option&quot; + i, function() {
            if (MenuOptions[i].Type == 'Menu') {
              if (MenuOptions[i].Title == 'Settings') {
                $.post('https://DokusCore--Menu/OpenSettingsMenu', JSON.stringify({}));
              };
              if (MenuOptions[i].Title == 'Functions') {
                $.post('https://DokusCore--Menu/OpenFunctionsMenu', JSON.stringify({}));;
              };
              if (MenuOptions[i].Title == 'Music') {
                $.post('https://DokusCore--Menu/OpenMusicMenu', JSON.stringify({}));;
              };
            } else if (MenuOptions[i].Type == 'Option') {
              if (MenuOptions[i].Title == 'Open Inventory') {
                $.post('https://DokusCore--Menu/Close', JSON.stringify({}));
                $('body').fadeOut();
                $.post('https://DokusCore--Menu/OpenInventory', JSON.stringify({}));
              };
            };
          });
        };
  
        if (i &lt; 6) {
          for (let i = MenuOptions.length; i &lt; 6; i++) {
            $(&quot;#option&quot; + i).hide();
          };
        };
      };
    };
  
    if (MenuName == 'SettingsMenu') {
      $('#npc-header').html(MenuTitle);
      for (let i = 0; i &lt; MenuOptions.length; i++) {
        if (i &lt;= 6) {
          $(&quot;#option&quot; + i).show();
          $(&quot;#option&quot; + i).html(MenuOptions[i].Title);
          $(document).on('click', &quot;#option&quot; + i, function() {
            if (MenuOptions[i].Type == 'Menu') {
  
            } else if (MenuOptions[i].Type == 'Option') {
  
              if (MenuOptions[i].Title == 'Toggle Music') {
                $.post('https://DokusCore--Menu/ToggleMusic', JSON.stringify({}));
              };
  
            };
          });
        };
  
        if (i &lt; 6) {
          for (let i = MenuOptions.length; i &lt; 6; i++) {
            $(&quot;#option&quot; + i).hide();
          };
        };
      };
    };
  
  
    $('body').fadeIn();
  });
  
  // Close the menu
  $(document).on('click', &quot;.btn-closeinterface&quot;, function() {
    $('body').fadeOut();
    $.post('https://DokusCore--Menu/Close', JSON.stringify({}));
  });
  </code></pre>
  <p>Does anyone have an idea how to close this event whenever the user clicks on the close button?</p>
  <p>Many thanks in advance!</p>