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

Posted 2023-03-17

【中文标题】如何在Javascript中正确清空元素？

【英文标题】：How to empty element correctly in 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>

【参考方案1】：

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

【讨论】：

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

【参考方案2】：

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

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

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