remove（）を使用して要素を削除しましたが、そのプロパティはまだ存在します

Question

remove()に問題があります。 <svg>を削除した後、そのプロパティが存在するため、完全に削除します。位置などのプロパティ、およびその他のCSSプロパティ。私がremove()とempty()についていくつかの説明をすることができれば、もっと感謝します。助けてくれてありがとうございました。

マイコード：

$(document).ready(function() { 
 
    $('#play').click(function() { 
 
    $('#container svg').remove(); 
 
    }); 
 
    $('#test').text($('#svg1').position().left) 
 
}); // end ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container" style="width:600px; height: 400px"> 
 
    <svg height="130" width="150" style="position:absolute; left:200; top:200;" class="ui-widget-content" id="svg1"> 
 
    <text fill="black" x=75 y=75 style="text-anchor: middle">1</text> 
 
    <path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z"/fill="none" stroke="blue"> 
 
    </svg> 
 
</div> 
 
<button id="play">Play</button> 
 
<h1 id="test"></h1>

Answer 1

コードがdocument readyに直接配置されているため、最初の位置はsvgです。あなたはclickイベントハンドラ内でこのコード

$('#test').text($('#svg1').position().left) 

を入れて、コンソール出力を見ると、あなたはわかります、

Uncaught TypeError: Cannot read property 'left' of undefined

だから、それはつまり要素に沿ってすべてとそのプロパティはが削除されています。しかし、上記のjsエラーのために#test要素のテキストは変更されません。

$(document).ready(function() { 
 
    $('#play').click(function() { 
 
    $('#container svg').remove(); 
 
    $('#test').text($('#svg1').position().left) 
 
    }); 
 
    
 
}); // end ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container" style="width:600px; height: 400px"> 
 
    <svg height="130" width="150" style="position:absolute; left:200; top:200;" class="ui-widget-content" id="svg1"> 
 
    <text fill="black" x=75 y=75 style="text-anchor: middle">1</text> 
 
    <path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z"/fill="none" stroke="blue"> 
 
    </svg> 
 
</div> 
 
<button id="play">Play</button> 
 
<h1 id="test"></h1>

Answer 2

は、あなたのボタンにタイプ= "ボタン" を追加します。ボタンのデフォルトのタイプはsubmitです。ボタンがページを送信していて、リロードしています。

Answer 3

ない言っても過言...

$('#play').click(function() { 
    $('#container svg').remove(); 
    //Here #svg1 does not exist anymore 
    }); 
    //Here #svg1 exists