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

越少越好，所以我把代码放在这里：

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

你有什么建议可以将移除的元素恢复到之前的自我位置

---

在HTML文件中，我在.lead类中工作：

        <div class="lead">

        </div>

在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);

var撤销；
var main=函数（）{
$（'.lead'）。追加(
$（“”）。文本（“新段落”），
$（“”）。文本（“新段落”），
$（“”）。文本（“新段落”），
$（“”）。文本（'Add'），
$（“”）。text（'Remove'），
$（“”）。文本（'Undo'）
);
$（'#jquerybtnudo'）.hide（）；
}
$（文档）.on（'click'，'jQueryBtnAdd'，函数（事件）{
event.preventDefault（）；
$（'.lead'）。追加(
$（“”）.text（“新段落”）
);
});
$（文档）.on（'click'，'jQueryBtnRemove'，函数（事件）{
event.preventDefault（）；
撤消=$（'.selectedRow'）.remove（）；
undo.removeClass（'selectedRow'）；
console.log（撤销）；
$（'jquerybtnudo'）.show（'slow/400/fast'，function（）{
});
});
$（文档）.on（'click'，'jquerybtnudo'，函数（事件）{
event.preventDefault（）；
$（'.lead'）。追加（撤消）；
$（'jquerybtnudo'）.hide（'slow/400/fast'，function（））{
});
});
$（文档）。在（'单击'，'上。引导p'，函数（事件）{
event.preventDefault（）；
$（this.toggleClass（'selectedRow'）；
});
$（文件）.ready（主）；

如果是临时的，您可以简单地使用

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;
}

---

另一方面，

Show

/

Hide

更可靠。

如果是临时的，您可以简单地使用

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;
}

---

另一方面，

显示

/

隐藏

更可靠。

使用

分离

而不是

删除

，它分离元素，但有助于保留元素的细节，可以使用

附加

放回元素。如果是临时的，则不建议

删除

和

附加

。而是使用

show（）

和

hide（）

。这对我们和浏览器都很方便。@VinodKumar，显示/隐藏工作正常。如果我不想永远删除这一段呢@GuruprasadRao，分离工作，但我无法重新连接。没有任何附加或重新附加方法。若我使用append，它就消失了，把它放在列表的末尾。@GuruprasadRao，至少我现在对XY问题了解得更少了：D。感谢您的帮助。不要使用

删除
而是使用
分离
来分离元素，这有助于保留元素的详细信息，如果元素是临时的，则不建议使用
删除
和
附加
。而是使用
show（）
和
hide（）
。这对我们和浏览器都很方便。@VinodKumar，显示/隐藏工作正常。如果我不想永远删除这一段呢@GuruprasadRao，分离工作，但我无法重新连接。没有任何附加或重新附加方法。若我使用append，它就消失了，把它放在列表的末尾。@GuruprasadRao，至少我现在对XY问题了解得更少了：D。谢谢你的帮助。所以我选择了显示/隐藏。你对如何真正删除段落有什么想法？！因为刷新页面之后。它们又不见了。对不起，我没听懂。你的意思是，一旦你刷新页面，你就不再需要这些段落了？所以我选择显示/隐藏。你对如何真正删除段落有什么想法？！因为刷新页面之后。它们又不见了。对不起，我没听懂。你的意思是，一旦你刷新页面，你就不再需要这些段落了？
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.