How I delete a shape at the format Label with Tag and Text

Question

I have a format with the Label, Tag, and text into a shape, so, I want to delete a shape with the double click, it was functioning for the sample shape with, a circle, rect, and so on, but the shape Label, Tag and text, I can´t delete with double click at once. The problem is when I have 20 shapes (Label, Tag, and text), só I need 40 double clicks to delete all.

Code

var numberLabel = new Konva.Label({
    x: width / 2,
    y: 30,
    id: 'cNumberLabel',
    draggable: true,
});

numberLabel.add(new Konva.Tag({
    fill: bgCollor,
    stroke: 'black',
    lineJoin: 'round',
    pointerDirection: direction,
    pointerWidth: 8,
    pointerHeight: 11,
    cornerRadius: 2,
    draggable: false,
}));

var textNode = new Konva.Text({
    text: '',
    fontSize: 15,
    draggable: false,
    align: 'center',
    width: 22,
    fontStyle: 'bold',
    id: 'cTextNodecNumberLabel',
});

numberLabel.add(textNode);
layerDraw.add(numberLabel);

textNode.on('dragend click', (e) => {
    textNode.hide();

    var textPosition = textNode.absolutePosition();

    var areaPosition = {
        x: stageDraw.container().offsetLeft + textPosition.x,
        y: stageDraw.container().offsetTop + textPosition.y,
    };

    var textarea = document.createElement('textarea');
    document.body.appendChild(textarea);

    textarea.value                 = textNode.text();
    textarea.style.position        = 'absolute';
    textarea.style.top             = areaPosition.y + 'px';
    textarea.style.left            = areaPosition.x + 'px';
    textarea.style.width           = textNode.width() - textNode.padding() * 2 + 'px';
    textarea.style.height          = textNode.height() - textNode.padding() * 2 + 5 + 'px';
    textarea.style.fontSize        = textNode.fontSize() + 'px';
    textarea.style.border          = 'none';
    textarea.style.padding         = '0px';
    textarea.style.margin          = '0px';
    textarea.style.overflow        = 'hidden';
    textarea.style.background      = 'none';
    textarea.style.outline         = 'none';
    textarea.style.resize          = 'none';
    textarea.style.lineHeight      = textNode.lineHeight();
    textarea.style.fontFamily      = textNode.fontFamily();
    textarea.style.transformOrigin = 'left top';
    textarea.style.textAlign       = textNode.align();
    textarea.style.color           = textNode.fill();

    rotation = textNode.rotation();
    var transform = '';

    if (rotation) {
        transform += 'rotateZ(' + rotation + 'deg)';
    }

    var px = 0;
    var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
    
    if (isFirefox) {
        px += 2 + Math.round(textNode.fontSize() / 20);
    }

    transform += 'translateY(-' + px + 'px)';
    textarea.style.transform = transform;
    textarea.style.height = 'auto';
    textarea.style.height = textarea.scrollHeight + 3 + 'px';
    textarea.focus();

    function removeTextarea() {
        textarea.parentNode.removeChild(textarea);
        window.removeEventListener('click', handleOutsideClick);
        textNode.show();
    }

    function setTextareaWidth(newWidth) {
        if (!newWidth) {
            newWidth = textNode.placeholder.length * textNode.fontSize();
        }
        
        var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
        var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
        
        if (isSafari || isFirefox) {
            newWidth = Math.ceil(newWidth);
        }

        var isEdge = document.documentMode || /Edge/.test(navigator.userAgent);
        if (isEdge) {
            newWidth += 1;
        }
        textarea.style.width = newWidth + 'px';
    }

    textarea.addEventListener('keydown', function (e) {
        if (e.keyCode === 13 && !e.shiftKey) {
            textNode.text(textarea.value);
            removeTextarea();
        }
        if (e.keyCode === 27) {
            removeTextarea();
        }
    });

    textarea.addEventListener('mouseout', function (e) {
        textNode.text(textarea.value);
        removeTextarea();
    });

    textarea.addEventListener('keydown', function (e) {
        scale = textNode.getAbsoluteScale().x;
        setTextareaWidth(textNode.width() * scale);
        textarea.style.height = 'auto';
        textarea.style.height = textarea.scrollHeight + textNode.fontSize() + 'px';
    });

    function handleOutsideClick(e) {
        if (e.target !== textarea) {
            textNode.text(textarea.value);
            removeTextarea();
        }
    }
    setTimeout(() => {
        window.addEventListener('click', handleOutsideClick);
    });
});

textNode.on('mouseover', function () {
    stageDraw.container().style.cursor = "pointer";
});

textNode.on("mouseleave", function() {
    stageDraw.container().style.cursor = "default";
});


stageDraw.on('dblclick dbltap', function (e) {

    if (e.target === stageDraw) {
        return;
    }

    let currentShape = e.target;

    currentShape.remove();
    currentShape.destroy();

    layerDraw.draw();
    generateJsonLayout();
});

Answer 1

stageDraw.on('dblclick dbltap', function (e) {

    if (e.target === stageDraw) {
        return;
    }
    
    // check if clicked shape is inside label
    if (e.target.getParent() instanceOf Konva.Label) {
      e.target.getParent().destroy();
    } else {
      e.target.destroy();
    }
    layerDraw.draw();
    generateJsonLayout();
});