Как оптимизировать изменение DOM (отложенное изменение)?

Question

[Anton B]

Всем привет!

Когда нам нужно что-то добавить на страницу и сделать это оптимально, мы можем сделать так

var data = [1, 2, 3, 4];
var html = '';

$.each(data, function (k, v) {    
    html += '<div id="block_' + k + '">' + v + '</div>';    
});

$(body).append(html);

Как так же оптимально сделать удаление со страницы?

var data = [1, 3];

$.each(data, function (k, v) {    
    $('#block_' + v).remove();        
});

В первом примере у нас получает одна манипуляция с DOM, а во втором уже несколько.

Может быть есть какое то оптимальное решение? Или есть "отложенные изменения", типа сперва делаешь все что нужно, а потом командой push() происходит изменение?

Спасибо.

Answer 1

[Алексей Немиро]

var toRemove = '';

$.each(data, function (k, v) {    
   if(toRemove!='')toRemove+=',';
   toRemove += '#block_' + v;
});

$(toRemove).remove();

Хотя внутри все равно будет примерно то, что было в исходной задаче. (это просто предположение, факты не проверял)

Можно удалять не по id, а по class или каким-нибудь атрибутам. Будет красивее.

$('.removeme').remove();

или

// удалить все div-ы из родителя
$('div', '#родитель').remove();

--------------------------------------------------

Comments

[Anton B]

По классам не вариант, я не знаю что заранее буду удалять, а расставлять сперва классы нужным элементам, а потом удалять по классу... не знаю на сколько это эффективно, все таки поставить класс это наверно тоже работа с DOM.

А по поводу собрать в переменную remove необходимые идентификаторы, то вот тут как раз вопрос насколько это эффективней, чем мой вариант.

То есть нам нужен человек который знает jquery изнутри.

[Алексей Немиро]

Anton B: код открыть, посмотреть не проблема. Да, там тоже цикл. Разницы в принципе никакой, разве что эстетическая.

Тут без цикла не обойтись, особенно если удалять без jQuery.

Можно удалить верхний элемент целиком и создать заново с нужными детьми, будет всего две операции :)