9

私はjQueryを使用して、次のように埋め込みSVGに要素を追加しています。 

 var rect = SVG('rect');
 $(rect).attr( { x: left,
                 y: top,
                 width: right - left,
                 height: bottom - top,
                 style: style } );
 $(parentElement).append(rect);

parentElementは、たとえば$（'g：first'、svgRoot）のようになります。ここで、svgRootは埋め込まれたSVG要素を指します。

function SVG(elementName) {
        return document.createElementNS('http://www.w3.org/2000/svg', elementName);
}

これはうまく機能し、新しい長方形がブラウザに表示され、DOMに追加されます。

スクリーンショット

ただし、この長方形の削除は失敗します。それはまだブラウザに表示され、DOMに存在します：

$(rect).remove();

私も試しました

rect.parentNode.removeChild(rect);

その結果、「Uncaught TypeError：Cannot call method'removeChild'ofnull」というエラーメッセージが表示されます。

どうすればそれを修正できるか分かりますか？私のプロジェクトでは、jQuerySVGまたは別のプラグイン/フレームワークを使用できません。

4

2 に答える 2

4

sを使用してこの問題を解決することになりましたgroup。

私はこのコードで終わった：

var group = getGroupByName(name);
group.parentNode.removeChild(group);

...

function getGroupByName(name) {
    var container = document.getElementById("container");
    var groups = container.getElementsByTagName("g");
    for(var i=0; i<groups.length; i++) {
        if(groups[i].getAttributeNS(null, "name") === name) {
            return groups[i];
        }
    }
    return null;
}

container私の主なSVG要素はどこですか。

これは実証済みです。正常に動作します。

編集

コメントで指摘されているように。機能するこのフィドルを見つけることができます。あなたの例に似ています。4 つの長方形を作成し、最初の 2 つの長方形を削除します。

最初の要素を削除したい場合は、これを指定する必要があります:

$("rect").first().remove();

または、すべての長方形で何かをしたい場合は、次のようなものでこれにアプローチできます。

$("rect").each(function() {
     ... //could remove them here
}

編集 2

最後のコメントによると、オブジェクトへの参照がある限り、その変数を使用して削除できます。

この更新されたフィドルlastRectは、追加された最後の長方形を削除できることを示しています。

于 2013-02-06T17:27:58.397 に答える
4

私は.find("*")それがDOMをフラット化し、jQueryが処理できないネストの複雑さを無視していると推測しています(おそらく...これは少なくとも私の理論です)。

したがって、たとえば、これは rect、g、svg 要素以外のものをすべて削除します。

$("svg").find("*").not("rect, g").remove();

find() を表示し、svg 要素を削除する jSFiddle

于 2014-03-13T09:08:44.300 に答える