Remove eventListener in Javascript

Question

I have the following situation:

A section with id #section, on double click I am adding a form which contains labels, inputs a save button and a close form button.

For close form button on click I have another event to remove the form, which doesn't want to work. Can you tell me what is wrong with this code?

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>

Actually, you do not have an event to close the form; you have an event to stop the double clicking from happening, but only on closing the form (which I guess is the moment you want double clicking to work). What you want to do in your close button is to re add the double click event you removed after a double click occurred, and then remove the form. Everything is working, but because its just adding and removing event listeners you aren't seeing effects. — somethinghere
– somethinghere, Commented Jul 6, 2016 at 15:40
so, when you click the "close form" button, that particular form must be removed, right? — Arun AK
– Arun AK, Commented Jul 6, 2016 at 15:41
I don't think that is the case, because if I add console.log('Close Button"'); inside closeButton.addEventListener('click', function() { ...}); the console displays the text — user3456282
– user3456282, Commented Jul 6, 2016 at 15:44
Uhm, yes, the event is being fired, but the result of that event is not what you expect. Barmar has an answer below that could be your issue, but I also think that your dblclick removal makes no sense (doubleclicking when a form is open will open new form, but close one and the doubleclicking stops forever...) Anyhow, the effect is invisible. I said your code was working. — somethinghere
– somethinghere, Commented Jul 6, 2016 at 15:45
I know that if I change the type of the button to submit the form gets closed, but I want to be able to remove an eventListener using any kind of element — user3456282
– user3456282, Commented Jul 6, 2016 at 15:52

Barmar · Accepted Answer · 2016-07-06 15:56:08Z

2

Your close button event handler doesn't remove the form, it just removes the double-click event handler from the section. To remove the form, it should be:

closeButton.addEventListener("click", function() {
    section.removeChild(form);
});

edited Jul 6, 2016 at 15:56

answered Jul 6, 2016 at 15:42

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Remove eventListener in Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related