| <!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