Entfernen Element mit remove(), aber seine Eigenschaft existiert noch

Question

Ich habe ein Problem mit remove(). Nachdem ich die <svg> entferne, ist ihre Eigenschaft noch vorhanden, ich möchte sie vollständig löschen. Die Eigenschaften wie Position und andere CSS-Eigenschaft. Wenn ich einige Erklärungen über remove() und empty() haben kann, wird es mehr geschätzt. Vielen Dank für die Hilfe.

Mein Code:

$(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

Sie erhalten die anfängliche Position svg, weil Ihr Code direkt in document ready platziert ist. Wenn Sie diesen Code setzen

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

in Ihrem click Event-Handler und Blick auf die Ausgabe der Konsole, werden Sie sehen:

Uncaught TypeError: Cannot read property 'left' of undefined

Also, es bedeutet, dass das Element zusammen mit alle Seine Eigenschaften ist entfernt. Der Text des Elements #test ändert sich jedoch aufgrund des obigen js-Fehlers nicht.

$(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

Typ hinzufügen = "button" auf den Button aus. Der Standardtyp der Schaltfläche ist Senden. Der Button sendet die Seite und Sie erhalten einen Reload.

Answer 3

Nicht viel zu sagen ...

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