Удалить eventListener в Javascript
У меня есть следующая ситуация:
A section
с идентификатором #section
, на двойной щелчок я добавляю форму, которая содержит labels
, inputs
а save button
и А close form button
.
For close form
button on click у меня есть еще одно событие, чтобы удалить форму, которая не хочет работать. Вы можете сказать мне, что не так с этим кодом?
Большое спасибо!
var setAttributes = function setAttributes(el, attrs) {
for (var key in attrs) {
el.setAttribute(key, attrs[key]);
}
};
function createForm() {
var form = document.createElement('form');
setAttributes(form, {
'class': 'hotspot-form'
});
var labelT = document.createElement('label');
setAttributes(labelT, {
'for': 'title'
});
labelT.innerHTML = 'Title';
var inputT = document.createElement('input');
setAttributes(inputT, {
'type': 'text',
'name': 'title',
'id': 'inputTitle'
});
var labelD = document.createElement('label');
setAttributes(labelD, {
'for': 'description'
});
labelD.innerHTML = 'Description';
var inputD = document.createElement('input');
setAttributes(inputD, {
'type': 'text',
'name': 'description',
'id': 'inputDescription'
});
var saveButton = document.createElement('button');
setAttributes(saveButton, {
'id': 'button-save',
'type': 'submit'
});
saveButton.innerHTML = 'Save';
var closeButton = document.createElement('button');
setAttributes(closeButton, {
'id': 'button-close',
'type': 'button'
});
closeButton.innerHTML = 'Close Form';
form.appendChild(labelT);
form.appendChild(inputT);
form.appendChild(labelD);
form.appendChild(inputD);
form.appendChild(saveButton);
form.appendChild(closeButton);
return form;
}
var section = document.querySelector('#section');
console.log(section);
section.addEventListener('dblclick', addForm, false);
function addForm() {
var form = createForm();
section.appendChild(form);
var inputT = form.querySelector('#inputTitle');
var inputD = form.querySelector('#inputDescription');
var saveButton = form.querySelector('#button-save');
var closeButton = form.querySelector('#button-close');
inputT.addEventListener('input', saveInput, false);
inputD.addEventListener('input', saveInput, false);
function saveInput() {
var newTitle = inputT.value;
var newDescription = inputD.value;
}
closeButton.addEventListener('click', function() {
section.removeEventListener('dblclick', addForm, false);
}, false);
}
#section {
width: 300px;
height: 300px;
border: 1px solid black;
}
.hotspot-form {
background-color: #3d3d3d;
padding: 5px;
}
.hotspot-form label {
display: inline-block;
color: #ffffff;
}
.hotspot-form input {
display: inline-block;
width: 100%;
border: 0;
margin: 0;
padding: 0;
}
<section id="section"></section>