Is it possible to use addEventListner this way?

Asked

Viewed 31 times

0

I’m studying javascript and decided to play a little with the creation of fields with the CORE GIFT.

This is the code I’ve made so far :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<label for="telefone">Telefone:</label>
<input type="text" name="telefone" id="telefone">
<button id="submit">+</button>
<div class="n_campos"></div>

<script>

    document.querySelector('#submit').addEventListener('click', function(e){

        e.preventDefault();

        let n_telefone = document.createElement('label');
        let text = document.createTextNode('Telefone:');

        n_telefone.appendChild(text);

        let i_telefone = document.createElement('input');
        i_telefone.setAttribute('type', 'text');
        i_telefone.setAttribute('name', 'telefone');

        let buttonRemove = document.createElement('button');
        text = document.createTextNode('X');
        buttonRemove.appendChild(text);
        buttonRemove.setAttribute('id', 'remover');

        document.querySelector('.n_campos').appendChild(n_telefone);
        document.querySelector('.n_campos').appendChild(i_telefone);
        document.querySelector('.n_campos').appendChild(buttonRemove);   

    });

    document.querySelector('#remover').addEventListener('click', function(){
        console.log('removido');
    }); 

</script>

Field creation is working normally, but I’m trying to remove the created field in a way I don’t know if it’s possible. As you can see here :

let buttonRemove = document.createElement('button');
text = document.createTextNode('X');
buttonRemove.appendChild(text);
buttonRemove.setAttribute('id', 'remover');

I’m assigning an id #remove to the button and when it is clicked is called another addEventListner to remove it, but hit face with 2 problems first when I call the addEventListner in the form below, the id #remove has not yet been created and it is returned to me that the property does not exist , then when I add a new field and now there is id #remove, it does not impress me on the console the "removed".

I know I can remove the fields, just by setting the attribute onclick on the button and calling a function buttonRemove.setAttribute('onclick', 'algumafuncao()'), however I wanted to know if it is possible in the way I mentioned above.

javascript dom ecmascript-6

1 answer

3


Yeah, the problem is you’re recording document.querySelector('#remover').addEventListener('click', before he existed.

The best thing would be to join this event headphone when creating the button. In view of 

buttonRemove.setAttribute('id', 'remover');

use 

buttonRemove.addEventListener('click', ...

So you’re sure it’s the right thing and you only record the event handset once.

  • 2

    Thank you very much worked.

Browser other questions tagged javascript dom ecmascript-6

You are not signed in. Login or sign up in order to post.