Click here to Skip to main content
15,351,641 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Click on the canvas to create an input text window at the location.
When enter, the input text box disappears and only the text is pasted to the canvas. But I am having trouble clearing the input text box.

document.body.removeChild

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

or
$("#cvsBrowWpp"+id).remove(this);

b.replace is not a function

What is the problem and how can I fix it?

What I have tried:

   let canvas, ctx, font, hasInput;
    $( document ).on('click' , '.wtc-canvas' , function( e, ele ){
        id = $(this).attr('data-root');
        canvas = document.getElementById('canvas'+id),
        ctx = canvas.getContext('2d'),
        font = '14px sans-serif',
        hasInput = false;

        if(hasInput) return;
        addInput(e);
    });

    function addInput(e){
        var input = document.createElement('input');
        input.className = 'sstt';
        input.type = 'text';
        input.style.position = 'absolute';
        input.style.left = (x - 4) + 'px';
        input.style.top = (y - 4) + 'px';

        input.onkeydown = handleEnter;
//      document.body.appendChild(input);                                                                                                                                                             
        $("#cvsBrowWpp"+id).append(input);
        input.focus();

        hasInput = true;
    }

    function handleEnter(e){        
        var keyCode = e.keyCode;
        if(keyCode === 13){
            drawText(this.value, parseInt(this.style.left, 10), 
            parseInt(this.style.top, 10));
            document.body.removeChild(this);   // << === this.line
            /* or this */
            $("#cvsBrowWpp"+id).remove(this);   // <<== this
            hasInput = false;
        }
    }

    function drawText(txt, x, y){
        ctx.textBaseline = 'top';
        ctx.textAlign = 'left';
        ctx.font = '14px sans-serif';
        ctx.fillText(txt, x - 4, y - 4);
        console.log(txt);
    }
Posted
Updated 12-May-22 0:12am
v3
Comments
Richard MacCutchan 12-May-22 5:50am
   
The error is as stated in the message. The object referred to as this is not a child of the document body.
Chopin2001 12-May-22 6:01am
   
Updated the question. How to solve it?

$("#cvsBrowWpp"+id).remove($('.sstt')); b.repace is not a function.

1 solution

I Solved it.
$('.sstt').remove();

and function drawText(txt, x, y){
//add line;
context.fillText = 'white';
}
It's Work. Thanks Viewer.
   
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900