如何将删除的元素恢复到jQuery中删除位置之前

How to recover removed elements to before of removing position in jQuery?

本文关键字：删除 jQuery 位置 恢复 元素      更新时间：2023-09-26

少则多，所以我把代码放在这里：jsfiddle

用户可以通过按下删除按钮来选择段落并删除。之后将出现"撤消"按钮。我使用.append来恢复删除的段落，但它们会附加所有段落的末尾。

你有什么建议可以将去除的元素恢复到以前的自我状态？

在我工作的HTML文件中。lead类：

        <div class="lead">
        </div>

在CSS中，selectedRow背景色已更改：

body{
    background: #e3e3e3;
}
.selectedRow{
    background-color: rgba(30,30,30,.3);
}
#jQueryBtnUndo, #jQueryBtnAdd, #jQueryBtnRemove{
    margin-right: 5px;
}

在jQuery中：

var undo;
var main = function(){
    $('.lead').append(
        $('<p>').text('New Paragraph'),
        $('<p>').text('New Paragraph'),
        $('<p>').text('New Paragraph'),
        $("<div class='btn btn-larg btn-primary' id='jQueryBtnAdd'>").text('Add'),
        $("<div class='btn btn-larg btn-primary' id='jQueryBtnRemove'>").text('Remove'),
        $("<div class='btn btn-larg btn-primary' id='jQueryBtnUndo'>").text('Undo')
        );
    $('#jQueryBtnUndo').hide();
}

$(document).on('click', '#jQueryBtnAdd', function(event) {
    event.preventDefault();
    $('.lead').append(
        $('<p>').text('New Paragraph')
        );
});
$(document).on('click', '#jQueryBtnRemove', function(event) {
    event.preventDefault();
        undo = $('.selectedRow').remove();
        undo.removeClass('selectedRow');
        console.log(undo);
        $('#jQueryBtnUndo').show('slow/400/fast', function() {
        });
});
$(document).on('click','#jQueryBtnUndo', function(event) {
    event.preventDefault();
        $('.lead').append(undo);
        $('#jQueryBtnUndo').hide('slow/400/fast', function() {
        });
});
$(document).on('click', '.lead p', function(event) {
    event.preventDefault();
    $(this).toggleClass('selectedRow');
});
$(document).ready(main);

如果show()/hide()是临时的，您可以简单地使用它。

但是，如果只需要删除和追加，则可以将段落(索引(的位置存储为一个自包含的属性，并且可以在追加时进行检查。

这样说：

function detach(para) {
    var parent = para.parentNode;
    for(var c=0; c<parent.childNodes.length; c++) {
       if(parent.childNodes[c] == para) {
          para.setAttribute("paraPosition", c);
          break;
       }
    }
    return para;
}
function attach(para) {
    var parent = document.getElementById("parentId");
    var position = para.getAttribute("paraPosition");
    var nextElement = parent.childNodes[position];//Next element would have taken this place.
    if(nextElement) {
        para.insertBefore(nextElement);
    }
    else {
        parent.appendChild(para);
    }
    return para;
}

但是，此分离和附加方法可能会出现逻辑错误。即：

Say initially you 5 divs   [0,1,2,3,4];
You detach para "3"        [0,1,2,4];    //Now para "3" stores it position as 3.
You detach para "4"        [0,1,2];      //Now para "4" stores it position as 3.
Now you attach "3"         [0,1,2,3];
Now you attach "4"         [0,1,2,4,3];  // THIS HAPPENS AS YOU STORE "4"'s position as 3.

而Show/Hide则更可靠。

相关文章：