Question

就像问题说的那样。我已经能够通过单击一个按钮（不是我想要的）来摆脱整个列表，我已经能够单击一个按钮，而只消除按钮而不是文本，这是给我最大的问题

任何帮助将不胜感激。

//create the initial todocount variable
 var toDoCount = 0;

 window.onload = function() {
//user clicked on the add button in the to-do field add that text into the to-do text
$('#add-to-do').on('click', function(event) {
    event.preventDefault();
    //assign variable to the value entered into the textbox
    var value = document.getElementById('to-do').value; 
    //test value
    console.log(value);


    var todoitem = $("#to-dos");
    todoitem.attr("item-");
    //prepend values into the html and add checkmark, checkbox, and line break to make list
    var linebreak = "<br/>";
    var todoclose = $("<button>");
    todoclose.attr("data-to-do", toDoCount);
    todoclose.addClass("checkbox");
    todoclose.text("☑");

    //prepend values to html
    $("#to-dos").prepend(linebreak);
    $("#to-dos").prepend(value);
    $("#to-dos").prepend(todoclose);
    toDoCount++;

    //to remove item from checklist
    $(document.body).on("click", ".checkbox", function() {
        var toDoNumber = $(this).attr("data-to-do");

        $("#to-dos").remove();
        });
});

下面的HTML

                <div class ="col-4">
                <!-- To Do List -->
                <form onsubmit= "return false;">
                    <span id = "todo-item" type = "text">
                    <h4>Add your Agenda Here</h4>
                    <input id ="to-do" type = "text">
                    <input id ="add-to-do" value = "Add Item" type = "submit">
                    </span>
                </form>
             <div id="to-dos"></div>
            </div>

Answer 1

这应该有效。

//create the initial todocount variable
var toDoCount = 0;

$(function() {
  //user clicked on the add button in the to-do field add that text into the to-do text
  $('#add-to-do').on('click', function(event) {
    event.preventDefault();

    //assign variable to the value entered into the textbox
    var value = document.getElementById('to-do').value;
    //test value
    console.log(value);

    var todoitem = $("#to-dos");
    todoitem.attr("item-");
    //prepend values into the html and add checkmark, checkbox, and line break to make list
    var linebreak = "<br/>";
    var todoclose = $("<button>");
    todoclose.attr("data-to-do", toDoCount);
    todoclose.addClass("checkbox");
    todoclose.text("☑");

    //prepend values to html
    $("<div/>", {
        "class": "to-do-item"
      })
      .append([todoclose, value, linebreak])
      .appendTo($("#to-dos"));
    toDoCount++;

    //to remove item from checklist
    $(document.body).on("click", ".to-do-item", function() {
      var toDoNumber = $('.checkbox', this).attr("data-to-do");

      $(this).remove();
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-4">
  <!-- To Do List -->
  <form onsubmit="return false;">
    <span id="todo-item" type="text">
                    <h4>Add your Agenda Here</h4>
                    <input id ="to-do" type = "text">
                    <input id ="add-to-do" value = "Add Item" type = "submit">
                    </span>
  </form>
  <div id="to-dos"></div>
</div>

Answer 2

我发现根本问题与删除项目的方式有关。如果它是基于按钮的单击，则$(this).remove()只需删除按钮即可。

请考虑以下代码。

$(function() {
  function makeTask(todo) {
    var c = $("#to-dos .todo-item").length + 1;
    console.log(c, todo);
    var item = $("<div>", {
      class: "todo-item",
      id: "todo-item-" + c
    });
    $("<button>", {
      class: "checkbox todo-item-close",
      id: "todo-item-close-" + c
    }).html("☑").click(function(e) {
      console.log("Remove", $(this).parent().attr("id"));
      $(this).parent().remove();
    }).appendTo(item);
    item.append(todo);
    return item;
  }
  $('form').submit(function(e) {
    e.preventDefault();
    var task = makeTask($("#to-do").val());
    task.appendTo("#to-dos");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-4">
  <!-- To Do List -->
  <form>
    <h4>Add your Agenda Here</h4>
    <input id="to-do" type="text" />
    <input id="add-to-do" value="Add Item" type="submit" />
  </form>
  <div id="to-dos"></div>
</div>

在这里，我们添加按钮并为该按钮分配一个click事件。由于按钮位于<div>内部，因此我们需要遍历父元素，然后删除整个元素。

由于它是一种形式，许多用户可能会尝试使用 Enter 提交数据，所以我更喜欢使用.submit()回调。

希望有帮助。

我正在尝试创建一个清单，在该清单上可以单击每个“任务”的按钮，并在单击该行时将其删除。

2 个答案: