KineticJS Remove an item from a layer

Question

I've created a little example of the problem I'm having - I'm adding a rectangle to a layer as shown below (when pressing the "Add" button). I can then remove the same item by pressing the remove button...

... all good so far...

Now I try to add another item.. however, it won't add to the layer any more, despite the layer appearing to still be there.

Can anyone see what I'm doing wrong?

<html>
    <head>
        <title>Add / Remove Blocks</title>

        <style>
          body {
            margin: 0px;
            padding: 0px;
          }
          #buttons > input {
            padding: 10px;
            display: block;
            margin-top: 5px;
          }
        </style>

        <!-- Include script files -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="scripts/kinetic-v4.2.0.min.js"></script>
        <script type="text/javascript">
            var layer;
            var stage;

            $(document).ready(function() {
                // Create the stage
                stage = new Kinetic.Stage({
                    container: 'container',
                    width: 578,
                    height: 200
                });

                // Now add a new layer
                layer = new Kinetic.Layer();

                // add the layer to the stage
                stage.add(layer);
            });

            // Add a block to the screen
            function AddBlock()
            {
                // Create the name item
                var newItemName = "Block1";

                // Create the first block
                var rect = new Kinetic.Rect({
                    x: 100,
                    y: 100,
                    width: 10,
                    height: 10,
                    fill: 'black',
                    strokeWidth: 4,
                    id: newItemName,
                    name: newItemName
                  });

                // Add the block and draw it as well.
                layer.add(rect);
                layer.draw();
            }

            // Remove a block
            function RemoveBlock()
            {
                // Get the name
                var itemName = "Block1";

                // Get the shape
                var shape = stage.get(itemName)[0];

                // Now remove it
                layer.remove(shape);
            }
        </script>
    </head>
    <body>
        <div id="buttons">
            <input type="button" value="Add" id="Add" onclick="AddBlock();">
            <input type="button" value="Remove" id="Remove" onclick="RemoveBlock();">
        </div>
        <div id="container">&nbsp;</div>
    </body>
</html>

TIA for any help!

Paul

EDITED IN:

Having looked into it a bit more it seems that there were some errors in my script (as shown below) - that being said, I could only fix the issue by changing the script AND the version of Kinetic that I was using :

So - with kinetic version 4.0.1...

I've changed the code to:

// Remove a block
function RemoveBlock()
{
// Get the name
var itemName = ".Block1";

// Get the shape
var shape = layer.get(itemName)[0];

// Now remove it
layer.remove(shape);
layer.draw();
}

The question does still stand though - is the newer version of Kinetic breaking things? Or am I doing something fundamentally wrong?

Ani Ani · Accepted Answer · 2013-01-12T13:42:21

I believe the problem is with parameter id: newItemName which as per the KineticJS specifications needs to be unique

{String} config.id Optional
unique id

var rect = new Kinetic.Rect({
                    x: 100,
                    y: 100,
                    width: 10,
                    height: 10,
                    fill: 'black',
                    strokeWidth: 4,
                    id: newItemName,
                    name: newItemName
                  });

But more can be said if you make a jsfiddle

KineticJS Remove an item from a layer

2 Answers