Добавить флажок внутри флажка

Question

Я создаю список задач и пытаюсь создать кнопку удаления.Я собираюсь сделать кнопку удаления флажком, но я не знаю, как добавить ее к моей задаче.

$(() => {
  $('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></li>");
        $('#tasksUL').append(li);
        $(this).val("");
      }
    }
  });

  $('body').on('click', ':checkbox', function(e) {
    $(this).parent().toggleClass('selected');
  });
});

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/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></li>
</ul>

Answer 1

Надеюсь, что это решит проблему.

$(() => {
  $('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></li>");
        $('#tasksUL').append(li);
        $(this).val("");
      }
    }
  });

  $('body').on('click', ':checkbox', function(e) {
    $(this).parent().toggleClass('selected');
  });
  $(".delete-btn").on("click", function(){
    $(this).parent().remove();
  });
});

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

.right-margin {
  margin-right: 30px;
}
.delete-btn {
  display: none;
}
.selected .delete-btn {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/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="delete-btn">Del</button>
  </li>
</ul>

Answer 2

Вы не можете поставить флажок в поле, это не имеет смысла. Как браузер узнает, что делать?

Чтобы решить вашу проблему, я добавил дополнительный флажок, который скрыт CSS, ярлык для которого использовался для переключения флажка.

Затем мы используем jQuery, чтобы найти элементы с установленным флажком удаления и удалить родительский элемент li

$(() => {
  let idx = 0;
  $('input').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newTask = $(this).val();
      if (newTask) {

        //Use a template literal, it makes replacing things easier. Use a counter
        //to make sure id's are uniqe
        idx++;
        var li = $(`<li><input type='checkbox' id='newtasklist${idx}' name="done" class='right-margin'><input type='checkbox' id='delete${idx}' name="delete" value="newtaskitem${idx}"><label>${newTask}</label><label class="delete" title="Select item for removal" for='delete${idx}'>♻</label></li>`);
        $('#tasksUL').append(li);
        
      }
    }
  });
 
  $("#deleteItems").on("click", function(){
    //find checked delete checkboxes and iterate them
    $("#tasksUL [name=delete]:checked").each(function(){
      //find the parent list item and remove it
      $(this).closest("li").remove();
    })
  })

});

/*We can do the decoration with CSS*/
#tasksUL input[name=done]:checked~label {
  text-decoration: line-through;
  font-size: 20px;
}

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

/*Hide the delete check box - use the label instead*/
[type="checkbox"][name="delete"] {display:none;}


.delete {margin-left:1em;}

/*Change the appearence when marked for deletion*/
#tasksUL input[name=delete]:checked ~ label {color:#ccc; font-weight:bold}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/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="newtaskitem0" name="done" class="right-margin">
  <input type='checkbox' id='delete${idx}' name="delete" value="newtaskitem0"><label>test</label><label for='delete${idx}' class="delete" title="Select item for removal">♻</label></li>
</ul>
<input type="button" value="Delete marked items" id="deleteItems">