Skip to content

Instantly share code, notes, and snippets.

@maurisrx

maurisrx/eventListener2.html Secret

Last active January 27, 2021 12:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maurisrx/214b575a609b2a75d711dc54ac0f064e to your computer and use it in GitHub Desktop.
Save maurisrx/214b575a609b2a75d711dc54ac0f064e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
eventListener2.html
<!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 );
setListener( dynamic );
}
function setListener( el ) {
// Dynamic elements event listener
el.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