maurisrx/eventListener3.html Secret

## eventListener3.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 );
        }

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