diff --git a/awx/ui/client/features/output/index.controller.js b/awx/ui/client/features/output/index.controller.js
index 4e59735f24..40f66dbf1b 100644
--- a/awx/ui/client/features/output/index.controller.js
+++ b/awx/ui/client/features/output/index.controller.js
@@ -838,6 +838,15 @@ function OutputIndexController (
 
         return last();
     });
+
+    $scope.$on('$destroy', () => {
+        stopListening();
+
+        render.clear();
+        render.el.remove();
+        slide.clear();
+        stream.bufferInit();
+    });
 }
 
 OutputIndexController.$inject = [
diff --git a/awx/ui/client/features/output/render.service.js b/awx/ui/client/features/output/render.service.js
index 7acb4119e0..6111cbbe8d 100644
--- a/awx/ui/client/features/output/render.service.js
+++ b/awx/ui/client/features/output/render.service.js
@@ -3,6 +3,7 @@ import Entities from 'html-entities';
 
 import {
     EVENT_START_PLAY,
+    EVENT_START_PLAYBOOK,
     EVENT_STATS_PLAY,
     EVENT_START_TASK,
     OUTPUT_ANSI_COLORMAP,
@@ -208,6 +209,10 @@ function JobRenderService ($q, $sce, $window) {
         const lines = stdout.split('\r\n');
         const record = this.createRecord(event, lines);
 
+        if (event.event === EVENT_START_PLAYBOOK) {
+            return { html: '', count: 0 };
+        }
+
         let html = '';
         let count = lines.length;
         let ln = event.start_line;
@@ -228,6 +233,10 @@ function JobRenderService ($q, $sce, $window) {
             html += row;
         }
 
+        if (this.records[event.uuid]) {
+            this.records[event.uuid].lineCount = count;
+        }
+
         return { html, count };
     };
 
@@ -433,18 +442,24 @@ function JobRenderService ($q, $sce, $window) {
     };
 
     this.removeAll = () => {
-        const elements = this.el.children();
+        const elements = this.el.contents();
         return this.remove(elements);
     };
 
     this.shift = lines => {
-        const elements = this.el.children().slice(0, lines);
+        // We multiply by two here under the assumption that one element and one text node
+        // is generated for each line of output.
+        const count = 2 * lines;
+        const elements = this.el.contents().slice(0, count);
 
         return this.remove(elements);
     };
 
     this.pop = lines => {
-        const elements = this.el.children().slice(-lines);
+        // We multiply by two here under the assumption that one element and one text node
+        // is generated for each line of output.
+        const count = 2 * lines;
+        const elements = this.el.contents().slice(-count);
 
         return this.remove(elements);
     };
diff --git a/awx/ui/client/features/output/slide.service.js b/awx/ui/client/features/output/slide.service.js
index fd052cc8fc..e4f410b1b3 100644
--- a/awx/ui/client/features/output/slide.service.js
+++ b/awx/ui/client/features/output/slide.service.js
@@ -126,6 +126,13 @@ function SlidingWindowService ($q) {
         return frames.filter(({ counter }) => counter > tail);
     };
 
+    this.clear = () => {
+        this.buffer.events.length = 0;
+        this.buffer.min = 0;
+        this.buffer.max = 0;
+        this.buffer.count = 0;
+    };
+
     this.getFrames = () => $q.resolve(this.buffer.events);
 
     this.getMaxCounter = () => {