ちょっとした質問です。
私はソート可能なドラッグアンドドロップシステムを作成しています。ユーザーがメッセージを削除ボックスにドラッグすると、.remove();が必要になります。消えます(よく削除します)が、問題は件名などのメッセージの小さな要素を削除することです。たとえば、 「メッセージ」要素の1つなど、div全体を削除したいです。では、メッセージ divであるこれの parentNode をどのように取得しますか
メッセージは更新されるので、メッセージについて心配する必要はありません
私が持っているコードは
<div class="message 1" id="1"> // I want to remove this part and only this part
<ul id="8">
<li class="dragable" id="2">
<!-- Dragable -->
</li>
<li class="checkbox" id="4">
<input type="checkbox" name="checkbox" class="checkbox" id="messagecheck1">
</li>
<li id="3">
<p> hi</p>
</li>
</ul>
</div>
js
$(".messageholder").sortable({
start: function(event, ui){
$(ui.item).css("opacity", "0.25");
draggable_sibling = $(ui.item).prev();
$(".deletebox").show();
},
stop: function(event, ui) {
$(".deletebox").hide();
if (dropped) {
if (draggable_sibling.length == 0)
$('.messageholder').prepend(ui.item);
draggable_sibling.after(ui.item);
dropped = false;
}
$(ui.item).css("opacity", "1.00");
},
update: function(event, ui){
//Use's Xhr to save the position of the message
var array = [];
$(".messageholder div").each(function(e){
array.push($(this).attr('id'));
});
$.ajax({
type: 'POST',
url: 'json/save.php',
data: ("data="+array)
});
}
});
$(".refresh").click(function(){
checkmessages();
});
$(".deletebox").droppable({
drop:function(event, ui){
dropped = true;
$(event.target.parentNode).closest('div').remove();
}
});
$(".messageholder").disableSelection();
それらは同じクラス名を持つ複数の要素であるため、メッセージクラスを1行のコードで削除することはできません。要素を個別に選択してそのように削除する必要があります。