title: JavaScript skips code ( because JavaScript engine is busy? )
body: <p>I encountered a problem in my code when I try to execute some code after my JavaScript removes a lot of DOM-elements.</p>
  
  <p>I am developing an webapplication named Castor. It is a code editor and it works pretty well. The problem is that i'm having an error after I closed an editor tab. I want the editor to select one tab after closing another. Unfortunately this doesn't work. The code near the removing of the DOM-elements doesn't get executed.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="castor-tabs"&gt;
      &lt;div class="castor-tab" data-path="../KeerpuntMobile/script/functions.php" data-saved="saved" data-editor="5475045011989editor"&gt;
          &lt;span class="castor-filename"&gt;functions.php&lt;/span&gt;
          &lt;span class="castor-close"&gt;&lt;i class="fa fa-fw fa-times"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="castor-tab" data-path="../KeerpuntMobile/script/jquery-1.10.2.min.js" data-saved="saved" data-editor="54750453e81a3editor"&gt;
          &lt;span class="castor-filename"&gt;jquery-1.10.2.min.js&lt;/span&gt;
          &lt;span class="castor-close"&gt;&lt;i class="fa fa-fw fa-times"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="castor-tab active" data-path="../KeerpuntMobile/script/functions.js" data-saved="saved" data-editor="54750457a94f6editor"&gt;
          &lt;span class="castor-filename"&gt;functions.js&lt;/span&gt;
          &lt;span class="castor-close"&gt;&lt;i class="fa fa-fw fa-times"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>$(".castor-tabs").on("click", ".castor-close", function() {
          var tab = $(this).parent();
          if(tab.attr("data-saved") == "saved") {
              // File is saved
  
              if($(".castor-tab").length &gt; 1) {
                  // 1 element is 'tab' the other is a second tab
  
                  if(tab.next().length &gt; 0) {
                      // If element is to the right
                      tab.next().click();
                      console.log(tab.next().attr("data-editor"));
  
                  } else if(tab.prev().length &gt; 0) {
  
                      // If element is to the left
                      tab.prev().click();
                      console.log(tab.prev().attr("data-editor"));
  
                  }
              }
  
              var editor = tab.attr("data-editor");
              $("#" + editor).remove(); // textarea linked to CodeMirror
              $("#" + editor + "editor").remove(); // Huge CodeMirror-element
              tab.remove();
          } else {
              // File isn't saved
          }
      });
  
  $(".castor-tabs").on("click", ".castor-tab", function() {
      $(".castor-tab.active").removeClass("active");
      $(this).addClass("active");
      var editor = $(this).attr("data-editor");
      $(".CodeMirror").hide();
      $("#" + editor).show();
  });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/Ng0m1.png" alt="The tabs"></p>
  
  <p>If I click on the cross of the middle tab the editor disappears, the tab disappears, I get an output in my console, but none of the other tabs get clicked.</p>
  
  <p>The output of the console.log is "54750457a94f6editor".</p>
  
  <p>This shows that tab.next() represents the the tab with the filename 'functions.js' which is the right one.</p>
  
  <p>I've replaced the $(element).click() with $(element).trigger("click") and it didn't help. I even pasted the whole click-event code in this if-statement but nothing seems to work. I hope you can help me with a solution.</p>