Question

我正在创建一个待办事项列表，并在每个任务旁边创建一个删除按钮。如何使删除按钮显示在每个列表项的右侧？

编辑：我设法弄清楚了。实际上，这比我预期的要简单。我只是使用“ right：20px;”在列表标签下。

$(() => {
  $('input').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newTask = $(this).val();
      if (newTask) {
        var li = $("<li><input type='checkbox' id='newtasklist' class='right-margin' <label>" + newTask + "</label> <button type='button' class='deletetask'></button> <button type='button' class='addtocalendar'></button> </li>");
        $('#tasksUL').append(li);
        $(this).val("");
      }
    }
  });
  $('body').on('click', ':checkbox', function(e) {
    $(this).parent().toggleClass('selected');
  });
  $(document).on("click", ".deletetask", function() {
    $(this).parent().remove();
  });
});

.selected {
  text-decoration: line-through;
  font-size: 20px;
}

.right-margin {
  margin-right: 20px;
}

input[id="newtasklist"] {
  background: url('taskchecked.png');
  background-size: 100%;
}

.deletetask {
  background: url('delete.png') no-repeat;
  background-size: 100%;
  width: 20px;
  height: 20px;
  border: none;
  margin-left: 20px;
  outline: none;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask">
<ul id="tasksUL">
  <li><input type="checkbox" id="newtaskitem" class="right-margin"><label>test</label> <button type="button" class="deletetask"></button></li>
</ul>

目前，每个列表项旁边都没有按钮显示。如何使删除按钮显示在每个列表项的右侧？

如何使按钮停留在列表中的一个位置

0 个答案: