Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Removing and Replacing elements

Removing and Replacing elements

The following shows how to remove and replace elements.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300">
<script type="text/ecmascript"><![CDATA[
var svgNS = "http://www.w3.org/2000/svg";
function removeElement(evt) {
var element = evt.target;
element.parentNode.removeChild(element);
}
function replaceRect(evt) {
var rect = evt.target;
//determine center for new circle
var centerX = parseFloat(rect.getAttributeNS(null,"x")) +
parseFloat(rect.getAttributeNS(null,"width")) / 2;
var centerY = parseFloat(rect.getAttributeNS(null,"y")) +
parseFloat(rect.getAttributeNS(null,"height")) / 2;
//create a new circle element and set the attributes
var circle = document.createElementNS(svgNS,"circle");
circle.setAttributeNS(null,"cx",centerX);
circle.setAttributeNS(null,"cy",centerY);
circle.setAttributeNS(null,"r",
parseFloat(rect.getAttributeNS(null,"height")) / 2);
circle.setAttributeNS(null,"fill","blue");
circle.addEventListener("click",removeElement,false);
rect.parentNode.replaceChild(circle,rect);
}

]]></script>
<g id="firstGroup">
<rect width="70" height="50" x="40" y="5"
fill="blue" onclick="replaceRect(evt)"/>
<rect width="70" height="50" x="40" y="65"
fill="blue" onclick="replaceRect(evt)"/>
<rect width="70" height="50" x="40" y="125"
fill="blue" onclick="replaceRect(evt)"/>
<rect width="70" height="50" x="40" y="185"
fill="blue" onclick="replaceRect(evt)"/>
<rect width="70" height="50" x="40" y="245"
fill="blue" onclick="replaceRect(evt)"/>
<text x="150" y="30">Click on rectangle
<tspan x="150" dy="15">to exchange it with a circle,</tspan>
<tspan x="150" dy="15">Click on Circle to remove it.</tspan>
</text>
</g>
</svg>

Link to example 7 (remove_or_replace_elements.svg) – in a separate window)

In order to remove an element it is necessary to know its parent element. The property parentNode makes a reference to the parent of an element. The method element.removeChild(element) removes a child element. The argument is a reference to the element to be removed.

To replace an element with another element two node references are needed. Of course one can create a new reference by creating a new element, as it is the case in this example. The method .replaceChild(newChild,oldChild) needs two arguments: the new reference to be inserted and the old reference to be replaced.

The method .addEventListener(type,listener,useCapture) allows one to dynamically add a new event listener to an element. The first argument is the type (e.g. “click”), the second argument is the event listener function or object (note that the event listener automatically passes the evt object to the function or object that implements the EventListener interface), the third argument indicates how the event is traversing the document tree (bubbling). Usually, one uses false here. Event Handling, however, will be a separate tutorial to be written at a later stage.

Comments