Question

如何删除＆＃34;：已检查＆＃34;在使用jquery的复选框中。以下是添加项目的代码。

template.html

<h2>To Do</h2>
    <form name="checkListForm">
        <input type="text" name="checkListItem"/>
    </form>
    <div id="button">Add!</div>
    <br/>
    <div class="list"><div class="checkbox"></div></div>

的script.js

$(document).ready(function(){
$('#button').click(function(){
var $li = $('input[name=checkListItem]');
var toAdd = $li.val();
$('.checkbox').after('<input type="checkbox"/>' + toAdd + '</br>' );}); 
if($('.checkbox').is(":checked")){$('.checkbox').child.remove();}
 });

Answer 1

$(document).ready(function() {
  $('#button').click(function() {
    var $li = $('input[name=checkListItem]');
    var toAdd = $li.val();
    $('.checkbox').prepend('<input type="checkbox" id="checklist-item-val"/>' + toAdd + '</br>');
    $('#checklist-item-val').on('click', function() {
      if ($(this).is(":checked") === true) {
        //$('.checkbox').empty();
        // What are we emptying?
      }
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>To Do</h2>
<form name="checkListForm">
  <input type="text" name="checkListItem" />
</form>
<button id="button">Add!</button>
<br/>
<div class="list">
  <div class="checkbox"></div>
</div>

Answer 2

因为这行：

$('.checkbox').after('<input type="checkbox"/>' + toAdd + '</br>');

你插入三个dom元素：输入+两个文本节点我建议直接使用普通JS。此外，因为您要动态添加元素，所以必须将change事件处理程序附加到上部静态anchestor（即：list）

$(document).ready(function () {
  $('#button').click(function () {
      var $li = $('input[name=checkListItem]');
      var toAdd = $li.val();
      $('.checkbox').after('<input type="checkbox"/>' + toAdd + '</br>');
  });
  $('.list').on('change', ':checkbox', function (e) {
      if (this.checked) {
          this.nextSibling.remove();
          this.nextSibling.remove();
          this.remove();
      }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<h2>To Do</h2>

<form name="checkListForm">
    <input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>

<div class="list">
    <div class="checkbox"></div>
</div>

使用jquery在复选框中标记时删除项目

2 个答案: