addEventListener firing twice
<p>I'm creating a simple phonebook, that adds person name, last name and phone into a div and into the DOM, with option to delete this div with click event.
I have a class called Phonebook which contain these 2 functions:</p>

<pre><code>//add an event button to all divs inside the DOM
this.deleteBtnEvent = function(){
    var _this = this;
    //get all the divs that currently on the DOM
    var deleteBtn = document.getElementsByClassName('delete');
    for (var i = 0; i &lt; deleteBtn.length; i++) {
        deleteBtn[i].addEventListener('click', function(e){
            _this.removeContact(e.target.parentElement.attributes.index.value);
        });
    }   
};

//remove the div from the array and from the DOM
this.removeContact = function(index){
    var contactsHolder = document.getElementById('contacts');
    var contact = document.getElementsByClassName('contact');
    this._contacts.splice(index, 1);

    contactsHolder.removeChild(contact[index]);

    //update localstorage
    var stringArr = JSON.stringify(this._contacts);
    localStorage.setItem('data', stringArr);

    console.log('current: ');
    console.log(this._contacts);
};
</code></pre>

<p>for some reason the addEventListener is firing twice.
first time that the addEventListener is called, the function delete the div from the DOM and the array, the second time the listener is fired, i'm getting an error because the div with the same ID doesn't exist, because its already deleted.
I'm wondering if there's a way to solve this issue.</p>