时间戳

首页 > 解决方案 > HTML按钮元素没有输出任何东西

jquery - HTML按钮元素没有输出任何东西

问题描述

作为 jQuery 的新手，我正在尝试开发一个待办事项列表。但是按钮元素没有响应。

所有我想要实现的，当点击任何按钮时，相应的部分需要消失。

$(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>

标签： jquery

解决方案

这是代码

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);

推荐阅读