null
$(".delete").click(function () {
$(".delete").parent().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="taskCont">
<div class="todoCont">
<h2>todo</h2>
<div class="tasks" id="tasks">
<input type="checkbox" id="checkBox">
<div class="cat_time">
<h3 id="getCategory" class="getCategory">Coding</h3>
<p id="getTime">12:30 AM</p>
</div>
<span id="getDescription">Practice Javascript</span>
<p class="delete">Delete</p>
</div>
</div>
<div class="completedTaskCont">
<h2>completed</h2>
<div class="tasks">
<input type="checkbox" id="checkBox" checked>
<div class="cat_time">
<h3 id="getCategory">Shopping</h3>
<p id="getTime">10:30 AM</p>
</div>
<span id="getDescription">Bazar India</span>
<p class="delete">Delete</p>
</div>
</div>
</div>
null
在这段代码中,当我单击delete时,它将删除所有内容。 如何修复这个问题? 这是待办事项列表代码。 我试图解决使用for循环的问题,但没有奏效。
使用以下方法:
$(".delete").click(function () {
// This will delete the parent of element being clicked
$(this).parent().remove();
});
null
$(".delete").click(function () {
$(this).parent().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="taskCont">
<div class="todoCont">
<h2>todo</h2>
<div class="tasks" id="tasks">
<input type="checkbox" id="checkBox">
<div class="cat_time">
<h3 id="getCategory" class="getCategory">Coding</h3>
<p id="getTime">12:30 AM</p>
</div>
<span id="getDescription">Practice Javascript</span>
<p class="delete">Delete</p>
</div>
</div>
<div class="completedTaskCont">
<h2>completed</h2>
<div class="tasks">
<input type="checkbox" id="checkBox" checked>
<div class="cat_time">
<h3 id="getCategory">Shopping</h3>
<p id="getTime">10:30 AM</p>
</div>
<span id="getDescription">Bazar India</span>
<p class="delete">Delete</p>
</div>
</div>
</div>
单独上课很危险。 拿“这个”来说:
null
$(".delete").click(function () {
$(this).parent().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="taskCont">
<div class="todoCont">
<h2>todo</h2>
<div class="tasks" id="tasks">
<input type="checkbox" id="checkBox">
<div class="cat_time">
<h3 id="getCategory" class="getCategory">Coding</h3>
<p id="getTime">12:30 AM</p>
</div>
<span id="getDescription">Practice Javascript</span>
<p class="delete">Delete</p>
</div>
</div>
<div class="completedTaskCont">
<h2>completed</h2>
<div class="tasks">
<input type="checkbox" id="checkBox" checked>
<div class="cat_time">
<h3 id="getCategory">Shopping</h3>
<p id="getTime">10:30 AM</p>
</div>
<span id="getDescription">Bazar India</span>
<p class="delete">Delete</p>
</div>
</div>
</div>
使用delete
类调用所有元素,并对所有元素执行链接操作。 另一种可能的语法是调用Click event
对象上的目标元素:$(event.target).parent().remove()
。