从浏览器中删除SVG元素的交互式方式

我正在通过javascript/inline HTML5生成SVG矩形，我想知道我是否可以在一个矩形的右上角附加一个结束图标（如这样：https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRV4yho7mQoRWj-wEd8LvvKjs4sMAWSFi9cJu5IxGtWn667ofL10g），这样当我拖动矩形时，图标不会保持静态到该位置，而是始终附加到该矩形。

我的目标是让用户有机会从页面中删除该矩形。

如果有更简单的方法可以完成此删除操作，请随时告诉我！

提前感谢！

拖放功能：

var selectedElement = 0;
        var currentX = 10;
        var currentY = 10;
        var currentMatrix = 0;
        function selectElement(evt) {
            selectedElement = evt.target;
            currentX = evt.clientX;
            currentY = evt.clientY;
            currentMatrix = selectedElement.getAttributeNS(null, "transform").slice(7, -1).split(' ');
            for (var i = 0; i < currentMatrix.length; i++) {
                currentMatrix[i] = parseFloat(currentMatrix[i]);
            }
            selectedElement.setAttributeNS(null, "onmousemove", "moveElement(evt)");
            selectedElement.setAttributeNS(null, "onmouseout", "deselectElement(event)");
            selectedElement.setAttributeNS(null, "onmouseup", "deselectElement(event)");
        }      
        function deselectElement(evt) {
            if (selectedElement != 0) {
                selectedElement.removeAttributeNS(null, "onmousemove");
                selectedElement.removeAttributeNS(null, "onmouseout");
                selectedElement.removeAttributeNS(null, "onmouseup");
                selectedElement = 0;
            }
        }       

        function moveElement(evt) {
            dx = evt.clientX - currentX;
            dy = evt.clientY - currentY;
            currentMatrix[4] += dx;
            currentMatrix[5] += dy;
            newMatrix = "matrix(" + currentMatrix.join(' ') + ")";
            selectedElement.setAttributeNS(null, "transform", newMatrix);
            currentX = evt.clientX;
            currentY = evt.clientY;
        }

创建元素：

var g1 = document.createElementNS(svgNS, 'g');
                g1.setAttribute('transform', "translate(200,200)");
                rect = document.createElementNS(svgNS, 'rect');
                circle = document.createElementNS(svgNS, 'circle');

                    rect.setAttribute('id', "rec1");
                    rect.setAttribute('x', 224);
                    rect.setAttribute('y', 34);
                    rect.setAttribute('width', 188);
                    rect.setAttribute('height', 68);                    
                    rect.setAttribute('class', "draggableOrgUnit");                  
                    rect.setAttribute('transform', "matrix(1 0 0 1 0 0)");                    
                    rect.setAttribute('onmousedown', "selectElement(event)");                                      
                    //rect.setAttribute('onmouseup', "drop(event)");
                    circle.setAttribute('id', "c0");
                    circle.setAttribute('cx', "224");
                    circle.setAttribute('cy', "34");
                    circle.setAttribute('r', "5");
                    circle.setAttribute('onclick', "closeMe()");
                    circle.setAttribute('fill', "blue");

输出：

<svg>
  <g>
    <g>
    <rect>
    <circle>
    </g>
    ...
  <g>
</svg>

我只测试这个矩形。一旦这起作用，其他人将遵循相同的逻辑。