remove elements at end of teardown sequence

compiler/generate/index.js

@@ -112,9 +112,7 @@ export default function generate ( parsed, template ) {
 
 					const updateStatements = [];
 
-					const teardownStatements = [
-						`${name}.parentNode.removeChild( ${name} );`
-					];
+					const teardownStatements = [];
 
 					const allUsedContexts = new Set();
 
@@ -264,6 +262,10 @@ export default function generate ( parsed, template ) {
 							initStatements.push( deindent`
 								component.refs.${attribute.name} = ${name};
 							` );
+
+							teardownStatements.push( deindent`
+								component.refs.${attribute.name} = null;
+							` );
 						}
 
 						else {
@@ -288,6 +290,8 @@ export default function generate ( parsed, template ) {
 						updateStatements.push( declarations );
 					}
 
+					teardownStatements.push( `${name}.parentNode.removeChild( ${name} );` );
+
 					current.initStatements.push( initStatements.join( '\n' ) );
 					if ( updateStatements.length ) current.updateStatements.push( updateStatements.join( '\n' ) );
 					current.teardownStatements.push( teardownStatements.join( '\n' ) );

test/compiler/event-handler-removal/_config.js

@@ -0,0 +1,21 @@
+import * as assert from 'assert';
+
+// TODO gah, JSDOM appears to behave differently to real browsers here... probably need to raise an issue
+
+export default {
+	html: '<input><!--#if visible-->',
+	test ( component ) {
+		component.refs.input.focus();
+
+		// this should NOT trigger blur event
+		component.set({ visible: false });
+		assert.ok( !component.get( 'blurred' ) );
+
+		component.set({ visible: true });
+		component.refs.input.focus();
+
+		// this SHOULD trigger blur event
+		component.refs.input.blur();
+		assert.ok( component.get( 'blurred' ) );
+	}
+};

test/compiler/event-handler-removal/main.svelte

@@ -0,0 +1,11 @@
+{{#if visible}}
+	<input ref:input on:blur='set({ blurred: true })'>
+{{/if}}
+
+<script>
+	export default {
+		data: () => ({
+			visible: true
+		})
+	};
+</script>