Jquery 如何创建一个函数，在选中复选框时将其从类中移除？
我正在尝试创建一个任务管理器，我已经让任务的添加工作正常，但正与之相反。我想要它，这样当我点击一个复选框时，它将删除该复选框及其描述。有件事我做错了，我不确定是什么。我想我需要一个事件处理程序或其他东西，或者我没有正确使用remove（），而且我也不完全确定如何去做。因此，上面的Jquery 如何创建一个函数，在选中复选框时将其从类中移除？,jquery,function,checkbox,Jquery,Function,Checkbox,我正在尝试创建一个任务管理器，我已经让任务的添加工作正常，但正与之相反。我想要它，这样当我点击一个复选框时，它将删除该复选框及其描述。有件事我做错了，我不确定是什么。我想我需要一个事件处理程序或其他东西，或者我没有正确使用remove（），而且我也不完全确定如何去做。因此，上面的函数deleteTask（）{中的所有内容都在工作 <div id="sidebar"> <h2>Overall Status</h2>
函数deleteTask（）{ <div id="sidebar">
<h2>Overall Status</h2>
<div class="sb">
<h3>School -</h3>
<input type="submit" id="schl.bttn" value="0">
</div>
<div class="sb">
<h3>Work -</h3>
<input type="submit" id="wrk.bttn" value="0">
</div>
<div class="sb">
<h3>Weekend -</h3>
<input type="submit" id="wknd.bttn" value="0">
</div>
<div class="sb">
<h3>Other -</h3>
<input type="submit" id="othr.bttn" value="0">
</div>
</div>
<div id="tasks">
<div id="newtask">
<h2>Add New Task</h2>
<div id="IDK">
<div id="idk">
<label for="options">Options*</label>
<select id="options">
<option hidden disabled selected value>------------------------------------------</option>
<option value="School">School</option>
<option value="Work">Work</option>
<option value="Weekend">Weekend</option>
<option value="Other">Other</option>
</select>
</div>
<div id="idk2">
<label for="date">Completion Date</label>
<input type="date" id="date">
</div>
</div>
<label for="desc">Description*</label>
<input type="text" id="desc" size="75">
<input type="submit" id="add" value="Add">
<div id="req"><strong>* Required fields</strong></div>
</div>
<div id="current">
<h2>Current Tasks</h2>
<div id="schlwrkwkndothr">
<div id="schl">
<h3>School</h3>
<br>
</div>
<div id="wrk">
<h3>Work</h3>
<br>
</div>
<div id="wknd">
<h3>Weekend</h3>
<br>
</div>
<div id="othr">
<h3>Other</h3>
<br>
</div>
</div>
</div>
</div>
</div>
<div id="sidebar">
<h2>Overall Status</h2>
<div class="sb">
<h3>School -</h3>
<input type="submit" id="schl.bttn" value="0">
</div>
<div class="sb">
<h3>Work -</h3>
<input type="submit" id="wrk.bttn" value="0">
</div>
<div class="sb">
<h3>Weekend -</h3>
<input type="submit" id="wknd.bttn" value="0">
</div>
<div class="sb">
<h3>Other -</h3>
<input type="submit" id="othr.bttn" value="0">
</div>
</div>
<div id="tasks">
<div id="newtask">
<h2>Add New Task</h2>
<div id="IDK">
<div id="idk">
<label for="options">Options*</label>
<select id="options">
<option hidden disabled selected value>------------------------------------------</option>
<option value="School">School</option>
<option value="Work">Work</option>
<option value="Weekend">Weekend</option>
<option value="Other">Other</option>
</select>
</div>
<div id="idk2">
<label for="date">Completion Date</label>
<input type="date" id="date">
</div>
</div>
<label for="desc">Description*</label>
<input type="text" id="desc" size="75">
<input type="submit" id="add" value="Add">
<div id="req"><strong>* Required fields</strong></div>
</div>
<div id="current">
<h2>Current Tasks</h2>
<div id="schlwrkwkndothr">
<div id="schl">
<h3>School</h3>
<br>
</div>
<div id="wrk">
<h3>Work</h3>
<br>
</div>
<div id="wknd">
<h3>Weekend</h3>
<br>
</div>
<div id="othr">
<h3>Other</h3>
<br>
</div>
</div>
</div>
</div>
</div>
总体状况
学校-
工作-
周末-
其他-
添加新任务
选择权*
------------------------------------------
学校
工作
周末
其他
竣工日期
描述*
*必填字段
当前任务
学校
工作
周末
其他
<div id="sidebar">
<h2>Overall Status</h2>
<div class="sb">
<h3>School -</h3>
<input type="submit" id="schl.bttn" value="0">
</div>
<div class="sb">
<h3>Work -</h3>
<input type="submit" id="wrk.bttn" value="0">
</div>
<div class="sb">
<h3>Weekend -</h3>
<input type="submit" id="wknd.bttn" value="0">
</div>
<div class="sb">
<h3>Other -</h3>
<input type="submit" id="othr.bttn" value="0">
</div>
</div>
<div id="tasks">
<div id="newtask">
<h2>Add New Task</h2>
<div id="IDK">
<div id="idk">
<label for="options">Options*</label>
<select id="options">
<option hidden disabled selected value>------------------------------------------</option>
<option value="School">School</option>
<option value="Work">Work</option>
<option value="Weekend">Weekend</option>
<option value="Other">Other</option>
</select>
</div>
<div id="idk2">
<label for="date">Completion Date</label>
<input type="date" id="date">
</div>
</div>
<label for="desc">Description*</label>
<input type="text" id="desc" size="75">
<input type="submit" id="add" value="Add">
<div id="req"><strong>* Required fields</strong></div>
</div>
<div id="current">
<h2>Current Tasks</h2>
<div id="schlwrkwkndothr">
<div id="schl">
<h3>School</h3>
<br>
</div>
<div id="wrk">
<h3>Work</h3>
<br>
</div>
<div id="wknd">
<h3>Weekend</h3>
<br>
</div>
<div id="othr">
<h3>Other</h3>
<br>
</div>
</div>
</div>
</div>
</div>
var a = 0;
var b = 0;
var c = 0;
var d = 0;
function addTask() {
var newTask = $("#desc").val();
var newTask2 = $("#date").val();
if ($("#options").val() == "" || $("#desc").val() == "") {
alert("You have not completed all required fields.");
} else if ($("#options").val() == "School") {
$('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox1' }).appendTo($('#schl'));
$('<label />', { text: newTask+newTask2 }).appendTo($('#schl'));
document.getElementById("schl.bttn").value = ++a;
} else if ($("#options").val() == "Work") {
$('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox2' }).appendTo($('#wrk'));
$('<label />', { text: newTask+newTask2 }).appendTo($('#wrk'));
document.getElementById("wrk.bttn").value = ++b;
} else if ($("#options").val() == "Weekend") {
$('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox3' }).appendTo($('#wknd'));
$('<label />', { text: newTask+newTask2 }).appendTo($('#wknd'));
document.getElementById("wknd.bttn").value = ++c;
} else if ($("#options").val() == "Other") {
$('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox4' }).appendTo($('#othr'));
$('<label />', { text: newTask+newTask2 }).appendTo($('#othr'));
document.getElementById("othr.bttn").value = ++d;
}
$("#desc").val("");
$("#date").val("");
}
$(document).ready(function() {
$("#add").on("click", function() {
addTask();
});
});
function deleteTask() {
if ($('.checkbox1').is(':checked')) {
$('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox1' }).empty($('#schl'));
$('<label />', { text: newTask+newTask2 }).empty($('#schl'));
document.getElementById("schl.bttn").value = --a;
} else if ($('.checkbox2').is(":checked")) {
$('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox2' }).remove($('#wrk'));
$('<label />', { text: newTask+newTask2 }).remove($('#wrk'));
document.getElementById("wrk.bttn").value = --b;
} else if ($('.checkbox3').is(":checked")) {
$('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox3' }).remove($('#wknd'));
$('<label />', { text: newTask+newTask2 }).remove($('#wknd'));
document.getElementById("wknd.bttn").value = --c;
} else if ($('.checkbox4').is(":checked")) {
$('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox4' }).remove($('#othr'));
$('<label />', { text: newTask+newTask2 }).remove($('#othr'));
document.getElementById("othr.bttn").value = --d;
}
}
var a=0；
var b=0；
var c=0；
var d=0；
函数addTask（）{
var newTask=$（“#desc”）.val（）；
var newTask2=$（“#日期”）.val（）；
如果（$（“#选项”）.val（）=”|$（“#描述”）.val（）=”）{
警报（“您尚未完成所有必填字段。”）；
}else if（$（“#选项”）.val（）=“学校”）{
$（''，{type:'checkbox'，value:newTask+newTask2，class:'checkbox1'}）；
$（''，{text:newTask+newTask2}）；
document.getElementById（“schl.bttn”）.value=++a；
}else if（$（“#选项”）.val（）=“工作”）{
$（''，{type:'checkbox'，value:newTask+newTask2，class:'checkbox2'}）；
$（''，{text:newTask+newTask2}）.appendTo（$（'#wrk'）；
document.getElementById（“wrk.bttn”）.value=++b；
}else if（$（“#选项”）.val（）=“周末”）{
$（''，{type:'checkbox'，value:newTask+newTask2，class:'checkbox3'}）；
$（''，{text:newTask+newTask2}）；
document.getElementById（“wknd.bttn”）.value=++c；
}else if（$（“#选项”）.val（）=“其他”）{
$（''，{type:'checkbox'，value:newTask+newTask2，class:'checkbox4'}）；
$（''，{text:newTask+newTask2}）；
document.getElementById（“othr.bttn”）.value=++d；
}
$（“#desc”）.val（“”）；
$（“#日期”）.val（“”）；
}
$（文档）.ready（函数（）{
$（“#添加”）。在（“单击”，函数（）{
addTask（）；
});
});
函数deleteTask（）{
如果（$（'.checkbox1'）。是（':checked'））{
$（“”，{type:'checkbox'，值：newTask+newTask2，类：'checkbox1'}）。空（$（'schl'）；
$（''，{text:newTask+newTask2}）.empty（$（'#schl'））；
document.getElementById（“schl.bttn”）.value=--a；
}如果（$（'.checkbox2'）是（“：checked”））{
$（''，{type:'checkbox'，value:newTask+newTask2，class:'checkbox2'}）.remove（$（'#wrk'））；
$（''，{text:newTask+newTask2}）。删除（$（'#wrk'）；
document.getElementById（“wrk.bttn”）.value=--b；
}如果（$（'.checkbox3'）是（“：checked”））{
$（“”，{type:'checkbox'，值：newTask+newTask2，类：'checkbox3'}）。删除（$（'wknd'）；
$（''，{text:newTask+newTask2}）。删除（$（'#wknd'）；
document.getElementById（“wknd.bttn”）.value=--c；
}如果（$（'.checkbox4'）是（“：checked”））{
$（''，{键入：'checkbox'，值：newTask+newTask2，类：'checkbox4'}）。删除（$（'othr'）；
$（''，{text:newTask+newTask2}）。删除（$（'#othr'）；
document.getElementById（“othr.bttn”）.value=--d；
}
}
deleteTask（） <div id="sidebar">
<h2>Overall Status</h2>
<div class="sb">
<h3>School -</h3>
<input type="submit" id="schl.bttn" value="0">
</div>
<div class="sb">
<h3>Work -</h3>
<input type="submit" id="wrk.bttn" value="0">
</div>
<div class="sb">
<h3>Weekend -</h3>
<input type="submit" id="wknd.bttn" value="0">
</div>
<div class="sb">
<h3>Other -</h3>
<input type="submit" id="othr.bttn" value="0">
</div>
</div>
<div id="tasks">
<div id="newtask">
<h2>Add New Task</h2>
<div id="IDK">
<div id="idk">
<label for="options">Options*</label>
<select id="options">
<option hidden disabled selected value>------------------------------------------</option>
<option value="School">School</option>
<option value="Work">Work</option>
<option value="Weekend">Weekend</option>
<option value="Other">Other</option>
</select>
</div>
<div id="idk2">
<label for="date">Completion Date</label>
<input type="date" id="date">
</div>
</div>
<label for="desc">Description*</label>
<input type="text" id="desc" size="75">
<input type="submit" id="add" value="Add">
<div id="req"><strong>* Required fields</strong></div>
</div>
<div id="current">
<h2>Current Tasks</h2>
<div id="schlwrkwkndothr">
<div id="schl">
<h3>School</h3>
<br>
</div>
<div id="wrk">
<h3>Work</h3>
<br>
</div>
<div id="wknd">
<h3>Weekend</h3>
<br>
</div>
<div id="othr">
<h3>Other</h3>
<br>
</div>
</div>
</div>
</div>
</div>
$('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox1' }).appendTo($('#schl')).click(handle_removal);
<div id="sidebar">
<h2>Overall Status</h2>
<div class="sb">
<h3>School -</h3>
<input type="submit" id="schl.bttn" value="0">
</div>
<div class="sb">
<h3>Work -</h3>
<input type="submit" id="wrk.bttn" value="0">
</div>
<div class="sb">
<h3>Weekend -</h3>
<input type="submit" id="wknd.bttn" value="0">
</div>
<div class="sb">
<h3>Other -</h3>
<input type="submit" id="othr.bttn" value="0">
</div>
</div>
<div id="tasks">
<div id="newtask">
<h2>Add New Task</h2>
<div id="IDK">
<div id="idk">
<label for="options">Options*</label>
<select id="options">
<option hidden disabled selected value>------------------------------------------</option>
<option value="School">School</option>
<option value="Work">Work</option>
<option value="Weekend">Weekend</option>
<option value="Other">Other</option>
</select>
</div>
<div id="idk2">
<label for="date">Completion Date</label>
<input type="date" id="date">
</div>
</div>
<label for="desc">Description*</label>
<input type="text" id="desc" size="75">
<input type="submit" id="add" value="Add">
<div id="req"><strong>* Required fields</strong></div>
</div>
<div id="current">
<h2>Current Tasks</h2>
<div id="schlwrkwkndothr">
<div id="schl">
<h3>School</h3>
<br>
</div>
<div id="wrk">
<h3>Work</h3>
<br>
</div>
<div id="wknd">
<h3>Weekend</h3>
<br>
</div>
<div id="othr">
<h3>Other</h3>
<br>
</div>
</div>
</div>
</div>
</div>
<input type="submit" id="schl-btn" value="0">
<input type="submit" id="wrk-btn" value="0">
<input type="submit" id="wknd-btn" value="0">
<input type="submit" id="othr-btn" value="0">
handle_removation（）schl-btninput#schl btn您不需要删除任务（）
功能。当您添加
和
标记时，将它们绑定到事件侦听器，当您单击复选框时删除它们：
<div id="sidebar">
<h2>Overall Status</h2>
<div class="sb">
<h3>School -</h3>
<input type="submit" id="schl.bttn" value="0">
</div>
<div class="sb">
<h3>Work -</h3>
<input type="submit" id="wrk.bttn" value="0">
</div>
<div class="sb">
<h3>Weekend -</h3>
<input type="submit" id="wknd.bttn" value="0">
</div>
<div class="sb">
<h3>Other -</h3>
<input type="submit" id="othr.bttn" value="0">
</div>
</div>
<div id="tasks">
<div id="newtask">
<h2>Add New Task</h2>
<div id="IDK">
<div id="idk">
<label for="options">Options*</label>
<select id="options">
<option hidden disabled selected value>------------------------------------------</option>
<option value="School">School</option>
<option value="Work">Work</option>
<option value="Weekend">Weekend</option>
<option value="Other">Other</option>
</select>
</div>
<div id="idk2">
<label for="date">Completion Date</label>
<input type="date" id="date">
</div>
</div>
<label for="desc">Description*</label>
<input type="text" id="desc" size="75">
<input type="submit" id="add" value="Add">
<div id="req"><strong>* Required fields</strong></div>
</div>
<div id="current">
<h2>Current Tasks</h2>
<div id="schlwrkwkndothr">
<div id="schl">
<h3>School</h3>
<br>
</div>
<div id="wrk">
<h3>Work</h3>
<br>
</div>
<div id="wknd">
<h3>Weekend</h3>
<br>
</div>
<div id="othr">
<h3>Other</h3>
<br>
</div>
</div>
</div>
</div>
</div>
$('<input />', { type: 'checkbox', value: newTask+newTask2, class: 'checkbox1' }).appendTo($('#schl')).click(handle_removal);
这还要求您将
字段的名称（显示每个类别的计数）更改为：
<div id="sidebar">
<h2>Overall Status</h2>
<div class="sb">
<h3>School -</h3>
<input type="submit" id="schl.bttn" value="0">
</div>
<div class="sb">
<h3>Work -</h3>
<input type="submit" id="wrk.bttn" value="0">
</div>
<div class="sb">
<h3>Weekend -</h3>
<input type="submit" id="wknd.bttn" value="0">
</div>
<div class="sb">
<h3>Other -</h3>
<input type="submit" id="othr.bttn" value="0">
</div>
</div>
<div id="tasks">
<div id="newtask">
<h2>Add New Task</h2>
<div id="IDK">
<div id="idk">
<label for="options">Options*</label>
<select id="options">
<option hidden disabled selected value>------------------------------------------</option>
<option value="School">School</option>
<option value="Work">Work</option>
<option value="Weekend">Weekend</option>
<option value="Other">Other</option>
</select>
</div>
<div id="idk2">
<label for="date">Completion Date</label>
<input type="date" id="date">
</div>
</div>
<label for="desc">Description*</label>
<input type="text" id="desc" size="75">
<input type="submit" id="add" value="Add">
<div id="req"><strong>* Required fields</strong></div>
</div>
<div id="current">
<h2>Current Tasks</h2>
<div id="schlwrkwkndothr">
<div id="schl">
<h3>School</h3>
<br>
</div>
<div id="wrk">
<h3>Work</h3>
<br>
</div>
<div id="wknd">
<h3>Weekend</h3>
<br>
</div>
<div id="othr">
<h3>Other</h3>
<br>
</div>
</div>
</div>
</div>
</div>
<input type="submit" id="schl-btn" value="0">
<input type="submit" id="wrk-btn" value="0">
<input type="submit" id="wknd-btn" value="0">
<input type="submit" id="othr-btn" value="0">
handle\u removation（）
函数获取父对象的ID