如何从包含大量元素的类中删除一个元素？
如何从包含大量元素的类中删除一个元素？
提问于 2015-05-21 15:44:48
我有多个.note，我希望能够单击.remove (在每个.note中)，它将删除我单击的.remove所在的.note。我使用了.closest()来完成这个任务，但是它只适用于第一个音符，而不适用于之后的其他音符。提前感谢！
以下是代码：
删除.note的代码
$('.remove').click(function () {
$(this).closest('.note').remove(".note");
});HTML：
<body>
<div id="wrapper">
<div id="wrp">
<h1>Click to make a new note!!!</h1>
<hr>
<div class="note">
<p class="remove"><b>X</b>
</p>
<div class="time"></div>
<hr>
<textarea class="item"></textarea>
<div class="saved"><span class="msg"></span>
</div>
</div>
</body>联署材料：
$('.note').click(function (event) {
event.preventDefault();
});
$('#wrp, #wrapper').click(function showNote() {
$('.note').fadeIn();
});
$(function () {
$(document).mousedown(function (event) {
// only proceed if clcik is not anywhere in a note element
if (!$(event.target).closest('.note').length) {
var note2 = $('.note').first();
note2.clone().insertBefore(note2);
console.log(note2);
}
});
});
$('.remove').click(function () {
$(this).closest('.note').remove(".note");
});
window.onload = function () {
var input = $("#item").focus();
};
function date() { //code indentation
var now = new Date();
now2 = now.getMonth() + 1 + '/' + now.getDate() + '/' + now.getFullYear() + ' ' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
$('.time').html(now2);
}
date();
var autosaveOn = false;
function myAutosavedTextbox_onTextChanged() {
if (!autosaveOn) {
autosaveOn = true;
$('.item').everyTime("3000", function () {
$.ajax({
type: "POST",
url: "/echo/html/",
data: "id=1",
success: function (msg) {
$('.msg').text(Saved);
alert("saved");
}
});
}); //closing tag
}
}
$(".note").closest('.note').draggable();
$(function () {
$("#tabs").autoSave(callback, ms);
});
$(".item").autoSave(function () {
var time = new Date().getTime();
$("#msg").text("Draft Autosaved " + time);
}, 500);回答 4
Stack Overflow用户
回答已采纳
发布于 2015-05-21 15:51:48
由于您知道.remove元素是.note的直接子元素，所以只需选择它的父元素：
$('.remove').click(function () {
$(this).parent().remove();
});如果.remove元素不是.note的直接子元素，则可以这样做：
$('.remove').click(function () {
$(this).parents(".note").remove();
});重要：
如果您的笔记是动态生成的，那么您需要利用事件委托，方法是将单击处理程序附加到包装器上，而不是.remove按钮，并在包装器内单击类.remove的元素时触发：
$('#wrapper').on("click",".remove",function () {
$(this).parent().remove();
});Stack Overflow用户
发布于 2015-05-21 15:50:03
它看起来像你有一个笔记，然后你克隆它时，你点击其他东西，而不是便条，并将它插入到前面的笔记。因为您只绑定到第一个注意事项，所以需要使用一个活动函数。例如，类似于
$('body').on('click', '.remove', function() {
$(this).closest('.note').remove();
});
Stack Overflow用户
发布于 2015-05-21 15:47:51
这样做：
$('.remove').click(function () {
$(this).closest('.note').remove();
});这只会删除closest注释，因为closest()函数已经选择了元素。如果将一个参数传递给remove()，它将搜索与其匹配的所有元素，但如果在已经选定的节点上使用该参数，它将删除该节点。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30378488
复制相关文章
相似问题
腾讯云开发者
