Xóa các phần tử khỏi DOM và thêm chúng lại ở nơi chúng được

Question

Tôi có một cửa sổ phương thức. Điều tôi muốn xảy ra là xóa các phần tử nhất định khỏi trang khi phương thức mở và thêm chúng trở lại đúng vị trí sau khi phương thức đóng. Tôi không muốn hiển thị: không, bởi vì điều đó chỉ ẩn chúng, tôi cần chúng để thực sự bị xóa khỏi trang. Vì vậy, tôi có một chút jQuery để loại bỏ và thêm chúng trở lại sau khi một bộ đếm thời gian chỉ để thử nghiệm ...

CẬP NHẬT: Với những bổ sung vào mã, nó lấy phần tử trước, sau đó thêm nó trở lại sau cùng một yếu tố. Vấn đề là, nếu yếu tố đó cũng bị loại bỏ thì sao? Sau đó, nó sẽ không thêm trở lại! Ngoài ra, sẽ không xử lý sự kiện javascript bị mất trong này? Tôi đang phát triển một plugin, do đó, nó sẽ can thiệp vào trang web ít nhất là possibl, nhưng các yếu tố 3d nhưng có một lỗi trong chúng với Safari mà không thể có được xung quanh.

Bất kỳ ý tưởng nào về cách tạm thời có thể xóa phần tử 3D mà không can thiệp vào trang web của mọi người quá nhiều?

$3delements = $('*').filter(function(){return $(this).css('-webkit-transform-style') == 'preserve-3d'}); 
$3delementsposition = $3delements.prev() 

//On modal open 
$3delements.remove(); 

//On modal close 
$3delementsposition.after($3delements); 

Vấn đề là điều này đòi hỏi tôi chỉ định một vị trí nhất định trong DOM để họ quay trở lại. Tôi muốn các yếu tố để trở lại ở nơi họ. Làm thế nào tôi có thể chắc chắn rằng các yếu tố không thay đổi/di chuyển/mất thông tin trên .remove để .append.

Answer 1

1. Sử dụng .detach() và .append() để loại bỏ và lắp lại các yếu tố, nó sẽ duy trì tất cả các sự kiện và dữ liệu của bạn.

2. Nếu bạn thêm các yếu tố sau theo thứ tự ngược lại rằng bạn loại bỏ họ, họ nên tất cả rơi trở lại ở vị trí

---

đang chưa được kiểm tra

---

var elems3d = $(...); 
var elemsRemoved = []; 

// removing 
elems3d.each(function(i,o) { 
    var elem = $(o); 
    elemsRemoved.push({ 
     loc: elem.prev(), 
     obj: elem.detach() 
    }); 
}); 

// adding back 
while (elemsRemoved.length) { 
    var elem = elemsRemoved.pop(); 
    elem.loc.after(elem.obj); 
} 

Answer 2

Thay vì xóa các phần tử, hãy thay thế chúng bằng phần tử trình giữ chỗ (sử dụng replaceWith) rồi thay thế trình giữ chỗ có nội dung gốc khi cần. Giống như sau:

$3delements = $('*').filter(function(){return $(this).css('-webkit-transform-style') == 'preserve-3d'}); 
var originals = []; 
$3delements.each(function() { 
    // Clone original, keeping event handlers and any children elements 
    originals.push($(this).clone(true)); 
    // Create placeholder for original content 
    $(this).replaceWith('<div id="original_' + originals.length + '"></div>'); 
}); 

/// 
/// Do something asynchronous 
/// 

// Replace placeholders with original content 
for (var i in originals) { 
$('#original_' + (i + 1)).replaceWith(originals[i]); 
} 

Xem clone và replaceWith trong các tài liệu jQuery để biết thêm.

Answer 3

Tôi đã tạo ra fiddle. Hãy cho tôi biết nếu điều này đáp ứng yêu cầu của bạn.

http://jsfiddle.net/mNsfL/12/