HTML button element not out-putting anything

Question

As a new comer to jQuery, I'm trying to develop a To-Do list. But the button element is not responding.

All I want to achieve, when any button is clicked, corresponding section needed to be disappeared.

$(document).ready(function() {


  $("input").on('keypress', (e) => {

    if (e.keyCode === 13) {
      let val = $('.input').val();

      if ($('section').length === 0) {

        $('.list').append('<section id=1></section>');

        $('section').append(val).append('<button class="done" type="button">Done</button>').append('<button class="delete" type="button">Delete</button>');
      } else {
        $('#1').parentsUntil('body').append('<section></section>');

        $("section:empty").append(val).append('<button class="done" type="button">Done</button>').append('<button class="delete" type="button">Delete</button>');
      }

    }

  });
});

$(document).ready(function() {

  $(':button .delete').on('click', function() {
    console.log('hi');
    //$(this).parentsUntil('div').remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="input" type="text" name="myInput">

<div class="list">
</div>

Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — CertainPerformance, Aug 31 '19 at 02:56

score 0 · Answer 1 · answered Aug 31 '19 at 03:55

Here is code

Html:

<div class="container">
  <form id="form-todo">
    <input class="input" type="text" placeholder="To Do">
    <button type="submit">Submit</button>
  </form>
  <ul id="list-todo"></ul>
</div>

Css:

ul#list-todo li.strike span {
  text-decoration: line-through;
}

JS:

function addTodo(event) {
  event.preventDefault();

  let input = $('#form-todo > input');
  let value = input.val();

  let html = `
    <li>
      <input type="checkbox" name="${value}" value="${value}" class="done">
      <span>${value}</span>
      <button class="btn-delete">Delete</button>
    </li>`;

  listTodo.append(html);

  input.val("");
}

function strikeTodo(event) {
  event.preventDefault();

  $(this).parent().toggleClass('strike');
}

function deleteTodo(event) {
  event.preventDefault();

  $(this).parent().remove();
}

// Add item.
formTodo.submit(addTodo);

// Delte item.
listTodo.on('click', '.btn-delete', deleteTodo);

// Strike item.
listTodo.on('click', '.done', strikeTodo);

HTML button element not out-putting anything

1 Answers1