Jquery RaphaelJS在单击时删除元素_Jquery_Onclick_Raphael

Jquery RaphaelJS在单击时删除元素

jquery

Jquery RaphaelJS在单击时删除元素,jquery,onclick,raphael,Jquery,Onclick,Raphael,我想在单击某个形状时删除该形状，如果“删除”单选按钮为“true”。现在我只能删除整个拉斐尔的论文。有人能帮我吗？我使用RaphaelJS和Jquery HTML <html lang="en" style="height: 100%;"> <head> <script src="raphael-min.js" type="text/javascript"></script> <script src="jquery-min.

我想在单击某个形状时删除该形状，如果“删除”单选按钮为“true”。现在我只能删除整个拉斐尔的论文。有人能帮我吗？我使用RaphaelJS和Jquery

HTML

<html lang="en" style="height: 100%;">
<head>
    <script src="raphael-min.js" type="text/javascript"></script>
    <script src="jquery-min.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
</head>
<body>
    <input type='radio' id='un' name="action" value="un">draw un</button>
    <input type='radio' id='deux' name="action" value="deux">draw deux</button>
    <input type="radio" id='remove' name="action" value="remove"> remove


  <div id="holder">
  </div>

</body>
</html>

通常使用

元素删除形状。删除（）

：

不要这样做：

if ($("#remove").is(":checked")) 
    paper.remove();

这将删除所有内容，只需删除如上所示的元素

您应该为元素分配

id

，这将帮助您使用Paper.getById（id）
函数。您将能够获得需要删除的确切元素

var paper = Raphael("holder",500,500);
var which_one_to_remove = -1;

// use data() to assign ids that correspond to the order
// in which you push() the elements into the array object
var c1 = paper.circle(100, 100, 80).attr({fill:'red'}).data('id', '0');
var c2 = paper.circle(200, 200, 80).attr({fill:'yellow'}).data('id', '1');
var c3 = paper.circle(300, 300, 80).attr({fill:'blue'}).data('id', '2');

var elements = [];
elements.push(c1);
elements.push(c2);
elements.push(c3);

c1.click(function()
{
    which_one_to_remove = this.data('id');
});
c2.click(function()
{
    which_one_to_remove = this.data('id');
});
c3.click(function()
{
    which_one_to_remove = this.data('id');
});

$('#holder').click(function () {
    if ($("#remove").is(":checked")) 
    {
        elements[which_one_to_remove].remove();
    };
});

if ($("#remove").is(":checked")) 
    paper.remove();

var paper = Raphael("holder",500,500);
var which_one_to_remove = -1;

// use data() to assign ids that correspond to the order
// in which you push() the elements into the array object
var c1 = paper.circle(100, 100, 80).attr({fill:'red'}).data('id', '0');
var c2 = paper.circle(200, 200, 80).attr({fill:'yellow'}).data('id', '1');
var c3 = paper.circle(300, 300, 80).attr({fill:'blue'}).data('id', '2');

var elements = [];
elements.push(c1);
elements.push(c2);
elements.push(c3);

c1.click(function()
{
    which_one_to_remove = this.data('id');
});
c2.click(function()
{
    which_one_to_remove = this.data('id');
});
c3.click(function()
{
    which_one_to_remove = this.data('id');
});

$('#holder').click(function () {
    if ($("#remove").is(":checked")) 
    {
        elements[which_one_to_remove].remove();
    };
});