CODEWITHSUNDEEP
javascripthtmlcss
Brian
Brian

Reputation: 55

TO DO LIST in javascript

I want to add a delete button beside each of the items that are to be added. How to do this properly so the all the functions work?

I have tried the method below as you will see in the code. This seems correct to me but it's not working. This needs to be purely JavaScript`. 

var button = document.createElement("BUTTON");
var ul = document.getElementById("list");
var li = document.createElement("li");
function handleAddNewItem() //adds new items and more
{
   var item = document.getElementById("input").value;
   var ul = document.getElementById("list");
   var li = document.createElement("li");

   if (item === '') {
      alert("Input field can not be empty");
   }
   else {
      button.innerText = "Delete";
      li.appendChild(document.createTextNode("- " + item));
      ul.appendChild(li);
      ul.appendChild(button);
   }
   document.getElementById("input").value = ""; //clears input

   //li.onclick = clearDom;
}//code deletes items by clearDom function

document.body.onkeyup = function (e) //allows items to be added with enter button
{
   if (e.keyCode == 13) {
      handleAddNewItem();
   }
}

function clearDom() {
   //e.target.parentElement.removeChild(e.target);//removeChild used
   ul.removeChild(li);
   ul.removeChild(button);
}

button.addEventListener("click", clearDom);




<body>
   <input id="input" placeholder="What needs to be done?">
   <button id="add_button" onclick="handleAddNewItem()">ADD</button>
   <ul id="list">
   </ul>
</body>
<script src="new.js"></script>

</html>


var button = document.createElement("BUTTON");
var ul = document.getElementById("list");
var li = document.createElement("li");

function handleAddNewItem() //adds new items and more
{
  var item = document.getElementById("input").value;
  var ul = document.getElementById("list");
  var li = document.createElement("li");

  if (item === '') {
    alert("Input field can not be empty");
  } else {
    button.innerText = "Delete";
    li.appendChild(document.createTextNode("- " + item));
    ul.appendChild(li);
    ul.appendChild(button);
  }
  document.getElementById("input").value = ""; //clears input

  //li.onclick = clearDom;
} //code deletes items by clearDom function

document.body.onkeyup = function(e) //allows items to be added with enter button
{
  if (e.keyCode == 13) {
    handleAddNewItem();
  }
}

function clearDom() {
  //e.target.parentElement.removeChild(e.target);//removeChild used
  ul.removeChild(li);
  ul.removeChild(button);
}

button.addEventListener("click", clearDom);
<input id="input" placeholder="What needs to be done?">
<button id="add_button" onclick="handleAddNewItem()">ADD</button>
<ul id="list">
</ul>
<!-- commented out to reduce errors in the console
<script src="new.js"></script> -->

I am facing this error for now-

"The node to be removed is not a child of this node. at HTMLButtonElement.clearDom new.js:33:7"

I want to implement the delete button in line with the items listed. so that it deletes the items added one by one separately.

Upvotes: 1

Views: 432

Answers (2)

David Thomas
David Thomas

Reputation: 253358

I'd suggest:

function handleAddNewItem() {
  /* Move the creation of all variables within the function
     in which they're being used: */
  const button = document.createElement('button'),
    ul = document.getElementById('list'),
    li = document.createElement('li'),
    item = document.getElementById('input').value;

  // here we use String.prototype.trim() to remove leading
  // and trailing whitespace from the entered value, to
  // prevent a string of white-space ('   ') being considered
  // valid:
  if (item.trim() === '') {
    alert("Input field can not be empty");
  } else {
    button.textContent = "Delete";

    // here we again use String.prototype.trim(), this time to
    // avoid the creation of a '                      task              '
    // with extraneous white-space:
    li.appendChild(document.createTextNode("- " + item.trim()));
    // appending the <button> to the <li> instead
    // of the <ul> (of which it would be an invalid
    // child element anyway):
    li.appendChild(button);
    ul.appendChild(li);
  }
  document.getElementById("input").value = ''; //clears input
}

document.body.onkeyup = function(e) //allows items to be added with enter button
{
  if (e.keyCode == 13) {
    handleAddNewItem();
  }
}

// the e - the EventObject - is passed automagically from
// the later use of EventTarget.addEventListener():
function clearDom(e) {

  // e.target is the element on which the event that we're
  // reacting to was originally fired (the <button>):
  const clickedButton = e.target;

  // here we use DOM traversal methods to find the closest
  // ancestor <li> element, and then use ChildNode.remove()
  // to remove it from the DOM:
  clickedButton.closest('li').remove();
}

// using event-delegation to catch the
// delete-button clicks:
// first we retrieve the element already on the page which
// will be an ancestor of the appended elements:
document.getElementById('list')
  // we then bind the clearDom() function - note the deliberate
  // lack of parentheses - as the 'click' event-handler:
  .addEventListener('click', clearDom);


function handleAddNewItem() {
  /* Creating all variables within the function: */
  const button = document.createElement('button'),
    ul = document.getElementById('list'),
    li = document.createElement('li'),
    item = document.getElementById('input').value;

  if (item.trim() === '') {
    alert("Input field can not be empty");
  } else {
    button.textContent = "Delete";
    li.appendChild(document.createTextNode("- " + item));
    li.appendChild(button);
    ul.appendChild(li);
  }
  document.getElementById("input").value = '';
}

document.body.onkeyup = function(e) {
  if (e.keyCode == 13) {
    handleAddNewItem();
  }
}

function clearDom(e) {
  const clickedButton = e.target;
  clickedButton.closest('li').remove();
}

document.getElementById('list')
  .addEventListener('click', clearDom);
<input id="input" placeholder="What needs to be done?">
<button id="add_button" onclick="handleAddNewItem()">ADD</button>
<ul id="list">
</ul>

While this question is already, arguably, already answered, I had a few moments to spare and took advantage of this question to begin learning how to use custom elements. The code, as above, is explained so far as possible using comments in the code itself:

// using an Immediately-Invoked Function
// Expression ('IIFE') to handle the creation of the
// custom element:
(function() {

  // creating an HTML <template> element, this could
  // instead be placed in, and retrieved from, the DOM:
  const template = document.createElement('template');

  // using a template literal to create, and format
  // the HTML of the created <template> (using a template
  // literal allows for new-lines and indentation):
  template.innerHTML = `
      <style>
        *, ::before, ::after {
        	padding: 0;
          margin: 0;
          box-sizing: border-box;
        }
        div.layout {
          display: grid;
          grid-template-columns: 1fr min-content;
        }
        div.buttonWrap {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }
      </style>
      <div class="layout">
      	<p></p>
        <div class="buttonWrap">
      		<button>delete</button>
        </div>
      </div>
  `;

  // using class syntax:
  class TaskItem extends HTMLElement {
    // the constructor for the class and, by extension,
    // the element that we're defining/creating:
    constructor() {
      // it seems that super() must be placed as the
      // first thing in the constructor function:
      super();

      // we're holding the contents of the custom
      // element in the Shadow DOM, to avoid its
      // descendants being affected by CSS in the
      // parent page and to prevent JavaScript in
      // the document from interacting with the
      // contents:
      this.attachShadow({
        // we want to interact and use elements in
        // the Shadow Root, so it must be 'open'
        // (although 'closed' is the other valid
        // mode-type:
        mode: 'open'
      });

      // here we append the content - not the node
      // itself - of the created <template> element
      // using Node.cloneNode(), the Boolean true
      // means that the descendant elements are also
      // cloned and therefore appended:
      this.shadowRoot.appendChild(
        template.content.cloneNode(true)
      );

      // for easier reading we cache the shadowRoot
      // here (otherwise line-lengths can be a bit
      // silly):
      const root = this.shadowRoot,

        // retrieving the <button> element, which will
        // handle the task deletion:
        del = root.querySelector('button');

      // binding the anonymous function - defined
      // using an Arrow function as we don't
      // want to change the 'this' in the function -
      // as the event-handler for the 'click' event:
      del.addEventListener('click', () =>
        // here we traverse to the parentNode of
        // the 'this', and then use
        // parentNode.removeChild() to remove the
        // 'this' node:
        this.parentNode.removeChild(this));
    }

    // this callback is executed when the element is
    // connected/attached to the DOM:
    connectedCallback() {
      // we find the Shadow Root:
      this.shadowRoot

        // find the descendent <p> element:
        .querySelector('p')

        // and set its text-content to be equal
        // to that of the data-task attribute:
        .textContent = this.dataset.task;
    }
  }

  // here we define the custom element and its
  // class:
  window.customElements.define('task-item', TaskItem);
})();

// here we cache a reference to the <button> which will
// cause the addition of new tasks:
const addTask = document.getElementById('add_button'),

  // define the function that will handle the
  // addition of new tasks:
  createTask = () => {

    // caching the <input> element:
    const taskSource = document.getElementById('input'),
      // retrieving and trimming the entered
      // <input> value:
      task = taskSource.value.trim(),

      // creating a new element (custom
      // elements are created the same way
      // as 'normal' elements):
      createdTask = document.createElement('task-item');

    // updating the data-task attribute, for
    // retrieval/use later when the element
    // is added to the DOM:
    createdTask.dataset.task = task;

    // if we have a task (a zero-length/empty
    // string is considered falsey, a string
    // with a length greater than zero is
    // considered truthy and string with negative
    // length is considered impossible (I think),
    // and therefore falsey:
    if (task) {

      // we retrieve the element holding the
      // <task-item> elements:
      document.getElementById('list')

        // and append the created element:
        .appendChild(createdTask);
    }

    // removing the <input> element's value:
    taskSource.value = '';

  };

// adding createTask() as the event-handler for
// the 'click' event on the <button>:
addTask.addEventListener('click', createTask);

// binding an anonymous function as the handler for
// keyup events on the <body> (binding to a closer
// ancestor would be more sensible in production):
document.body.addEventListener('keyup', (e) => {
  // if the e.which is 13 we trust that to be the
  // enter key, and then we call createTask()
  if (e.which === 13) {
    createTask();
  }
})
#list {
  margin-top: 0.5em;
  min-height: 1.5em;
  background: transparent radial-gradient(at 0 0, skyblue, lime);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 5px;
}

#list:empty::before {
  content: 'Add a new task!';
  background: transparent linear-gradient(to right, #fffa, #fff0);
  padding: 0 0 0 1em;
}

task-item {
  border: 2px solid lime;
  padding: 0.25em;
  background-color: #fff9;
}
<input id="input" class="add_task" placeholder="What needs to be done?">
<button id="add_button" class="add_task">ADD</button>
<div id="list"></div>

JS Fiddle demo.

Upvotes: 1

Grzegorz T.
Grzegorz T.

Reputation: 4123

Not very nice but a solution :)

else {
   button.innerText = 'Delete';
   li.appendChild(document.createTextNode('- ' + item));
   ul.appendChild(li);
   let but = button.cloneNode(true); // <-- solution
   li.appendChild(but);

   // clearDom function
   clearDom();
}

And also a function that erases a single entry

function clearDom() {
   let buttons = document.querySelectorAll('button:not(#add_button)');
   for (let i = 0; i < buttons.length; i++) {
       buttons[i].addEventListener('click', function (e) {
          e.target.parentNode.remove();
       }, false);
   }
}


let button = document.createElement('button');
let ul = document.getElementById('list');
let li = document.createElement('li');

function handleAddNewItem() {
  let item = document.getElementById('input').value;
  let ul = document.getElementById('list');
  let li = document.createElement('li');

  if (item === '') {
    alert('Input field can not be empty');
  }
  else {
    button.innerText = 'Delete';
    li.appendChild(document.createTextNode('- ' + item));
    ul.appendChild(li);
    let but = button.cloneNode(true);
    li.appendChild(but);

    clearDom();
  }
  document.getElementById('input').value = ''; // clears input
}

function clearDom() {
  let buttons = document.querySelectorAll('button:not(#add_button)');
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function (e) {
      e.target.parentNode.remove();
    }, false);
  }
}

document.body.onkeyup = function (e) {
  if (e.keyCode === 13) {
    handleAddNewItem();
  }
};
  <input id="input" placeholder="What needs to be done?">
  <button id="add_button" onclick="handleAddNewItem()">ADD</button>
  <ul id="list"></ul>

Upvotes: 1

Related Questions