How to use backspace or delete for remove a string which in span tag

This is my html :

<div id="mention" contenteditable="true">
<span class="mention-area">
<span class="highlight">
<a href="www.xyz">
<span class="trigger">@</span> "james"</a>
<div class="xMen"></div>
</span>
</span>
</div>

Here i want to use backspace or delete key for remove James from textarea. I tried google but couldn't get any solution so i post here for your help. Please can anyone help me to kindly solve this?

enter image description here