如何在Javascript中正确清空元素？答案

【问题标题】：How to empty element correctly in Javascript?如何在Javascript中正确清空元素？
【发布时间】：2019-04-03 09:53:59
【问题描述】：

我希望有一个页面，用户可以在没有输入框的情况下输入查询字符串，但是有一些键（+、- 和 = ) 有特殊含义虽然还没有输入。

在我提交查询字符串之前它工作正常。之后我尝试清空输入被保留的<div>（如$("#input").text('') 或$("#input").empty()），但它似乎不够空。当我在清空后尝试使用我的特殊键时，它的行为仍然像是有一些价值。只有在我再按一次退格，我的原始行为恢复了。

我在下面发布我的代码，但您可以在JSFiddle 中尝试：

编辑了解我可以在这里发布 sn-ps：

var basket = 0;

$(document).keydown(function(e) {
  var keycode = e.keyCode;

  if (keycode === 8 && $("#input").text() !== '') {
    var input = $("#input").text();
    $("#input").text(input.slice(0, -1));
  }

  if (keycode === 13 && $("#input").text() !== '') {
    var query = $("#input").text();
    $("#body").append(`<p>search: ${query}</p>`);
    // submit search
  }
});

$(document).keypress(function(e) {
  var keycode = e.keyCode;
  var char = String.fromCharCode(keycode);
  console.log(keycode);
  console.log(char);

  if (keycode === 13) {
    $("#input").empty();
  }

  if ($("#input").text() === '') {
    console.log("empty: '" + $("#input").text() + "'");
    if (char === '+') {
      basket++;
    } else if (char === '-') {
      basket--;
    } else if (char === '=') {
      basket = 0;
    } else {
      $("#input").append(char);
    }
    $("#basket").text(basket);
  } else {
    var temp = $("#input").text();
    console.log("not empty: '" + temp + "'");
    $("#input").append(char);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="input"></div>

<div id="basket"></div>

<div id="body"></div>

【问题讨论】：

标签： javascript jquery keyboard

【解决方案1】：

我只使用elem.innerHTML = ""; 这使它为空。但可能还有更多方法。

【讨论】：

它的行为和我的一样。也许我的代码在其他地方有缺陷......

【解决方案2】：

我找到了罪魁祸首，逻辑有缺陷。清空元素后，条件 (if ($("#input").text() === '')) 看到它是空的并添加了最后一次击键 (Enter)，所以在下一个 keypress 它不再为空。最简单的方法是清除 char 变量：

  if ( keycode === 13 ) {
    $("#input").empty();
    char = '';
  }

希望，上面的这个 sn-p 将来仍然可以帮助某人。

【讨论】：