HTML文字列から一度に1文字を削除します

Question

ユーザータイプとしてHTML divに値を送信します。これは、#finalkey divで使用する必要がある文字列をまとめて作成します。私は現在、値をクリアするオプションを持っていますが、バックスペースのように一度にHTMLの1文字を削除する方法を考えています。

// When someone clicks the key send the html value to another div 
// Display keys as user types 
$(".key").on("click", function() { 
    var thekeyvalue = $(this).html(); 
    $('#finalkey').append(document.createTextNode(thekeyvalue)); 
}); 

//When someone clicks clear clear the value 
// Clear keys when user clicks clear 
$(".delete").on("click", function() { 
    $('#finalkey').empty(); 
}); 

Answer 1

まず、あなたはバニラJavaScriptでjQueryの構文を混合しています。プロジェクトでjQueryを使用している場合は、jQueryを使用してすべての作業を行うことができます（単なる提案）。

ので、1つのアプローチは、このように、新しい<span>要素を追加する新しい手紙を作成することです：これはあなたが（あなたがたとえば、クラスletterを設定することができます）、それをカスタマイズすることができます

var newLetter = $("<span></span>", { 
    text: $(this).html() 
}); 

。

ので、#finalkey要素の最後spanを削除するには、すべての子供を取得するためにchildren()を使用し、last()と最後のいずれかを選択し、remove()でそれを削除することができます。

$(".delete").on("click", function() { 
    $('#finalkey').children().last().remove(); 
}); 

の作業のデモ：https://jsfiddle.net/mrlew/L1mmhbu0/

"空想" バージョン：https://jsfiddle.net/mrlew/L1mmhbu0/6/

Answer 2

なぜコンテンツを読んでいないのですか？最後の文字を削除してもう一度割り当ててください。

var text=$('#finalkey').text(); 
$('#finalkey').text(text.substring(0,text.length-1)); 

また、私はdocument.createTextNodeが不要だと思います。

Answer 3

すべての多分これ..

$(".delete").on("click", function() { 
    var a = $('#finalkey').text(); 
     a = a.substr(0, a.length - 1); 
     $('#finalkey').html(a); 
}); 

Answer 4

あなたは上のスライスを使用することができます

$(".key").on("click", function() { 
 
    var thekeyvalue = 'keyvaluetext'; 
 
    $('#finalkey').append(document.createTextNode(thekeyvalue)); 
 
}); 
 

 
    
 
$(".delete").on("click", function() { 
 
    $('#finalkey').text(function (_,txt) { 
 
    return txt.slice(0, -1); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="finalkey"></div> 
 

 
<button class="key">Add text</div> 
 
<button class="delete">Remove last char</div>