<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Event Listener - JavaScript</title> | |
</head> | |
<body> | |
<div class="static">Static</div> | |
<button class="add" onclick="return false;">Add</button> | |
<script type="text/javascript"> | |
document.querySelector( '.add' ).addEventListener( 'click', addElement ); | |
function addElement() { | |
var static = document.querySelector( '.static' ); | |
var dynamic = document.createElement( 'div' ); | |
dynamic.classList.add( 'dynamic' ); | |
dynamic.innerText = 'Dynamic'; | |
static.insertAdjacentElement( 'afterend', dynamic ); | |
} | |
document.addEventListener( 'click', function( e ) { | |
if ( this.querySelector( '.dynamic' ) ) { | |
var elements = this.querySelectorAll( '.dynamic' ); | |
for ( var i = 0; i < elements.length; i++ ) { | |
elements[i].addEventListener( 'click', function() { | |
this.remove(); | |
} ); | |
} | |
} | |
} ); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment