Как правильно очистить элемент в Javascript?

Question

Я хотел бы иметь страницу, на которой пользователь мог бы вводить строку запроса без поля ввода, но некоторые клавиши ( + , - и = ) имеют особое значение , а пока нет ввода.

Работает нормально, пока я не отправлю строку запроса. После этого я пытаюсь очистить <div> там, где был введен ввод (как $("#input").text('') или $("#input").empty()), но, похоже, он недостаточно пустой. Когда я пытаюсь использовать свои специальные ключи после опустошения, он по-прежнему ведет себя так, будто в нем есть какое-то значение. Только после Я нажимаю еще раз backspace , мое первоначальное поведение восстанавливается.

Я публикую свой код здесь, но вы можете попробовать его в JSFiddle :

РЕДАКТИРОВАТЬ Узнайте, я могу опубликовать фрагменты здесь:

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>

Answer 1

Я нашел виновника, в логике был недостаток. После очистки элемента условное (if ($("#input").text() === '')) увидело, что оно пустое, и добавило последнее нажатие клавиши ( Enter ), поэтому на следующем keypress оно больше не было пустым. Простейшим способом было очистить char переменную также:

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

Надеюсь, этот фрагмент выше еще поможет кому-то в будущем.

Answer 2

я просто использую elem.innerHTML = "";, это делает его пустым. но может быть больше способов.