Question

我对remove()有疑问。删除<svg>后，其属性仍然存在，我想完全删除它。诸如position和其他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事件处理程序中并查看控制台输出，您将看到：

未捕获的TypeError：无法读取未定义的属性'left'

因此，这意味着该元素以及所有其属性被删除。但是，由于上面的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

在按钮上添加type =“button”。按钮的默认类型是提交。所以按钮正在提交页面，你正在重新加载。

Answer 3

不多说......

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

使用remove（）删除元素，但其属性仍然存在

3 个答案: