How to solve the problem with the Backspace key "eating" the number mask?

Question

JavaScript

The problem is with the virtual Backspace button, as it removes not only the number but also the mask that sets the format for the number. Who faced this, tell me how to solve this problem?

Here is the button script:

function del(){
    var str = document.getElementById('phone').value;
    parseInt(str)
    document.getElementById('phone').value = str.substring(0, str.length-1);
    console.log(str)
    }

here is the markup for the button:

<input type="button" class="mybutton" onclick="del()" data-paste="→" value="→"/>

Here is the complete code: https://jsfiddle.net/0xL0fctq/98/

Answer 1

Add city code as a separate element ? for example through before.