Question

我在用户输入时向HTML div发送一个值，这个值组成了我需要在#finalkey div中使用的字符串。我目前可以选择清除该值，但我想知道如何允许一次删除HTML中的一个字符，如退格键。

 // 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

首先，您将jQuery语法与vanilla JavaScript混合在一起。如果你在项目中使用jQuery，你可以用它做所有的事情（只是一个建议）。

因此，一种方法是创建一个新的字母，添加一个新的<span>元素，如下所示：

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

这将允许您自定义它（例如，您可以设置类letter。）

因此，要删除最后span个#finalkey元素，您可以使用children()检索所有子项，并使用last()选择最后一个并将其删除{ {3}}

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

工作演示：remove()

“花哨”版本：https://jsfiddle.net/mrlew/L1mmhbu0/

Answer 2

试试这个......

＆＃13;

$( ".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);
});
 });

＆＃13;

<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>

＆＃13;

Answer 3

为什么不阅读内容，删除最后一个字符并再次分配？

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

另外，我认为document.createTextNode是不必要的。

Answer 4

也许这就是..

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

从HTML字符串一次删除一个字符

4 个答案: