Удаление элементов

Snap.svg предоставляет несколько удобных способов для удаления элементов из документа SVG. Основным методом является remove(), который применяется к объекту элемента. Этот метод полностью удаляет элемент из DOM, освобождая память и освобождая место в графическом дереве.

var paper = Snap(800, 600);
var circle = paper.circle(100, 100, 50);
circle.remove(); // элемент удалён из документа

Метод remove() не требует дополнительных аргументов и может вызываться на любом элементе, будь то rect, circle, path или group. После вызова элемента уже нельзя использовать для дальнейших манипуляций, если только он не был заново создан.

Удаление дочерних элементов в группах

Snap.svg позволяет объединять элементы в группы с помощью метода group(). Удаление элемента из группы осуществляется тем же методом remove(), но важно помнить, что удаление элемента из группы не удаляет всю группу, только выбранный элемент.

var rect = paper.rect(10, 10, 100, 50);
var circle = paper.circle(60, 35, 20);
var g = paper.group(rect, circle);

circle.remove(); // удаляет только круг, прямоугольник остаётся

Для удаления всех элементов группы можно использовать метод clear(), который полностью очищает группу, оставляя её существующей, но пустой.

g.clear(); // удаляет все дочерние элементы группы

Удаление элементов с условием

Иногда требуется удалить только определённые элементы, соответствующие условию. Snap.svg поддерживает работу с селекторами и методами фильтрации, такими как selectAll(). После выборки элементов можно применять forEach() для удаления только тех элементов, которые соответствуют заданным критериям.

var circles = paper.selectAll("circle");
circles.forEach(function(c) {
    if (c.attr("r") > 30) {
        c.remove();
    }
});

В этом примере удаляются все круги с радиусом больше 30 единиц, оставляя меньшие элементы нетронутыми.

Удаление элементов через родительский элемент

Snap.svg позволяет удалять дочерние элементы через родителя. Если известно, что элемент является частью определённого контейнера или группы, можно получить ссылку на родителя и вызвать метод remove() для конкретного дочернего элемента.

var rect = paper.rect(20, 20, 50, 50);
var g = paper.group(rect);
g.forEach(function(el) {
    if (el.type === "rect") {
        el.remove();
    }
});

Метод forEach() полезен для обхода всех дочерних элементов, что позволяет реализовать более сложные стратегии удаления, например, удаление по атрибутам или классам.

Скрытие элементов вместо удаления

Иногда удаление элемента может быть необратимым, и лучше использовать его временное скрытие. Для этого используется атрибут display или метод attr():

circle.attr({ display: "none" }); // скрывает элемент

В отличие от remove(), элемент остаётся в DOM и может быть показан повторно:

circle.attr({ display: "block" }); // элемент снова видим

Отличие remove() от clear()

  • remove() удаляет конкретный элемент полностью из DOM и графического дерева.
  • clear() очищает группу от всех дочерних элементов, но сама группа остаётся доступной для дальнейшего использования.

Эти методы часто комбинируются: clear() для подготовки группы к новым элементам и remove() для точечного удаления ненужных объектов.

Практическая оптимизация при удалении

Удаление большого количества элементов может повлиять на производительность, если выполнять remove() в цикле на сотнях объектов. Эффективнее использовать методы группировки и выборки:

var circles = paper.selectAll("circle");
var group = paper.group(circles);
group.clear(); // удаление всех выбранных элементов за один вызов

Такой подход снижает количество отдельных операций с DOM и ускоряет рендеринг документа.

Удаление анимированных элементов

Если элемент участвует в анимации через метод animate(), важно сначала остановить анимацию перед удалением, чтобы избежать ошибок:

var rect = paper.rect(50, 50, 100, 50);
var anim = rect.animate({ x: 200 }, 1000);
anim.stop();
rect.remove();

Snap.svg корректно освобождает ресурсы после удаления, включая анимационные объекты, если они были остановлены или завершены.

Оглавление