Question

我正在尝试使用HTML和Jquery / JavaScript创建待办事项列表。输入任务时，我可以将其删除，但是当没有任务时，如何隐藏删除键。本质上，我想这样做，以便删除功能仅在列表中有任务时可用，而在列表为空时隐藏。我怎么做？这是我的代码。

// HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE HTML>
<html>
  <head>
      <title>My Page</title>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
      <link rel="stylesheet" type="text/css" href="style.css"  />
      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript" src="TodoListJquery.js"></script>   
  </head>
  <body>
      <h1 id="x" class="position">To-Do List</h1>
      <div contenteditable="true">
      <ul id="todolist" class="background">

      </ul>
   </div>
      <input type="text" id="new-text" /><button  id="add">Add</button><button class="delete-checked">Delete Completed</button>
  </body>
</html>

// JavaScript

function addListItem() {
    var text = $("#new-text").val();
    if (text != "") {
      $("#todolist").append('<li><input type="checkbox" class="done" /> '+text+'  </li>')
      $("#new-text").val('');

    }

  }

  function deleteItems() {
    $("#todolist input:checked").each(function(index, elem) {
      // use apply to manually set the this context to the elem, since deleteItem
      // uses $(this) to check the element
      deleteItem.apply(elem);
    });
  }

  function deleteItem() {
    if ($(this).parent().css('textDecoration') == 'line-through') {
      $(this).parent().remove();
    } else {
      $(this).parent().remove();
    }
  }

  function finishItem() {
    if ($(this).parent().css('textDecoration') == 'line-through') {
      $(this).parent().css('textDecoration', 'none');
    } else {
      $(this).parent().css('textDecoration', 'line-through');
    }
  }

  $(function() {
    $('input[type=text]').keydown(function(e) {
      if (e.keyCode === 13) {
        addListItem();
      }
    });
    $("#add").on('click', addListItem);
    $(document).on('click', '.delete-checked', deleteItems);
    $(document).on('click', '.delete', deleteItem);
    $(document).on('click', '.done', finishItem);
  });

Answer 1

检查答案，

$(document).ready(function(){
removeDeleteButton();
});

function addListItem() {
    var text = $("#new-text").val();
    if (text != "") {
      $("#todolist").append('<li><input type="checkbox" class="done" /> '+text+'  </li>')
      $("#new-text").val('');
  removeDeleteButton();
    }

  }
  
  // Remove delete button
  function removeDeleteButton(){
   var isToDoItemsCount =  $('#todolist > li').length;
    if(isToDoItemsCount > 0){
       $('.delete-checked').show();
      }
      else{
        $('.delete-checked').hide();
      }
  
  }

  function deleteItems() {
    $("#todolist input:checked").each(function(index, elem) {
      // use apply to manually set the this context to the elem, since deleteItem
      // uses $(this) to check the element
      deleteItem.apply(elem);
    });
    removeDeleteButton();
  }

  function deleteItem() {
    if ($(this).parent().css('textDecoration') == 'line-through') {
      $(this).parent().remove();
    } else {
      $(this).parent().remove();
    }
    
    removeDeleteButton();
  }

  function finishItem() {
    if ($(this).parent().css('textDecoration') == 'line-through') {
      $(this).parent().css('textDecoration', 'none');
    } else {
      $(this).parent().css('textDecoration', 'line-through');
    }
  }

  $(function() {
    $('input[type=text]').keydown(function(e) {
      if (e.keyCode === 13) {
        addListItem();
      }
    });
    $("#add").on('click', addListItem);
    $(document).on('click', '.delete-checked', deleteItems);
    $(document).on('click', '.delete', deleteItem);
    $(document).on('click', '.done', finishItem);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE HTML>
<html>
  <head>
      <title>My Page</title>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
      <link rel="stylesheet" type="text/css" href="style.css"  />
      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript" src="TodoListJquery.js"></script>   
  </head>
  <body>
      <h1 id="x" class="position">To-Do List</h1>
      <div contenteditable="true">
      <ul id="todolist" class="background">

      </ul>
   </div>
      <input  type="text" id="new-text" /><button  id="add">Add</button><button style="display:none" class="delete-checked">Delete Completed</button>
  </body>
</html>

Answer 2

尝试以下代码：

$(function(){
  if($('ul#items li').length >= 1){
    $('.delete-checked').show();
  }else{
    $('.delete-checked').hide();
  }
});

Answer 3

使用jQuery文档就绪事件，并检查您是否有列表项。否则隐藏按钮

$( document ).ready(function() {
   //if("List Empty") 
   $("p").hide();
});

如何使用JQuery隐藏删除键

3 个答案: