jQueryキャンバス上のすべてのSVGを削除または非表示にする

Question

私はSVGを削除または隠したいと思っています。ダブルクリックします。

var draw = SVG('output').size(1000, 500); 

var table = draw.circle(50) 
.fill('#00ff0000') 
.stroke('black')] 
.center(50, 50); 
table.attr("class", "table"); 

$("svg").on('dblclick',function(event){ 
      $(".table").hide(); 
     }); 

var desk = draw.rect(50,50) 
.fill('green') 
.stroke('black') 
.move(100,0); 
desk.attr("class", "desk"); 

$("svg").on('dblclick',function(event){ 
      $(".desk").hide(); 
     }); 

var chair = draw.rect(50,50) 
.fill('green') 
.stroke('black') 
.move(200,0); 
desk.attr("class", "chair"); 

$("svg").on('dblclick',function(event){ 
      $(".chair").hide(); 
     }); 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script> 
<div id="output"></div> 

は、私が上のダブルクリック1を非表示にしたいが、私はそれらのいずれかをダブルクリックすると、今の結果は、それらのすべてが隠されている、ということです。キャンバスの空白をダブルクリックしても、すべてのSVG画像も隠されています。

Answer 1

$("svg")と書くと、ページ上のすべての単一のsvg要素を対象とします。 このコードでは、たとえば$("svg").on('dblclick',function(event){ $(".table").hide(); });が実行されると、 ページのSVGごとに"dblclick"イベントが表示され、".table"が非表示になります。これを解決するには、すべてのsvg要素をグローバルに選択するのではなく、CSSセレクタhttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectorsを使用して、指定したクラスに関連するsvgを取得します（$("svg.table").on('dblclick')などが必要な場合など）