How do I create a backspace button using JS?

What is supposed to happen is when the backspace <button> element is clicked , it reacts as if you typed a backspace button on your keyboard. This is not what is happening.

What have I tried? Scouring the internet, there are a lot of samples available for calculators, text areas, and paragraphs, including sample code on how to avoid backspace being pressed.

Also, on some forums, there are some very lengthy scripts, which after many days of trial and error, I couldn’t get to work. Too much to paste here.

I just had a look at some of the other questions on this forum, I have to admit I am totally lost.

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    table,
    tr,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }
  </style>
</head>

<body>
  <input id="myInput" type="search" placeholder="Filter Criteria..">
  <button id="back">backspace button</button>
  <table>
    <tbody id="myTable">
      <tr>
        <td>sedan</td>
        <td>suv</td>
        <td>hatchback</td>
      </tr>
      <tr>
        <td>fighterjet</td>
        <td>biplane</td>
        <td>helicopter</td>
      </tr>
    </tbody>
  </table>

</body>

<script>
  $("#back").click(function() {
    $("#myInput").text((i, text) => text.slice(0, -1));
  });
</script>

<script>
  $(document).ready(function() {
    $("#myInput").on("keyup", function() {
      var value = $(this).val().toLowerCase();
      $("#myTable tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });
  });
</script>

</html>

Solution

You made a mistake. HTML input element doesn't support text() function. If you want the back button click to work like the backspace keyboard shortcut, you should use the val() function.

I provide updated code.

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      table,
      tr,
      td {
        border: 1px solid black;
        border-collapse: collapse;
      }
    </style>
  </head>

  <body>
    <input id="myInput" type="search" placeholder="Filter Criteria..">
    <button id="back">backspace button</button>
    <table>
      <tbody id="myTable">
        <tr>
          <td>sedan</td>
          <td>suv</td>
          <td>hatchback</td>
        </tr>
        <tr>
          <td>fighterjet</td>
          <td>biplane</td>
          <td>helicopter</td>
        </tr>
      </tbody>
    </table>
  </body>
  <script>
    $(document).ready(function() {
      $("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#myTable tr").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });
      });

      $("#back").click(function() {
        $("#myInput").val((i, val) => val.slice(0, -1)); // Use val() instead of text()
      });
    });
  </script>
</html>