javascript - 使用 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

您正在获取 svg 的初始位置，因为您的代码直接放置在 document ready 中。当你把这段代码

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

在您的click 事件处理程序中并查看控制台输出，您会看到:

Uncaught TypeError: Cannot read property 'left' of undefined

因此，这意味着该元素及其所有属性被删除。但是，#test 元素的文本不会因为上述 js 错误而改变。

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