Search still works after deleting a user + cells keep being created without an input

Question

been working on some basic contacts app and got stuck in two places. Cells keep being created in the table even if there's no input (I've tried if statements) + after deleting a contact I can still search for it. How to remove it from the database? Is it possible to make the create button appear after all the fields have input in it? How can I remove the elements from db array after deleting the cells?

let db = [];
let contact = {};
// ADD CONTACT
$(document).ready(function() {
$("#create-contact").on("click", function(event) {
  event.preventDefault();

  contact.firstName = $('#name').val();
  contact.surname = $('#surname').val();
  contact.phone = $("#phone").val();
  contact.address = $("#address").val();

  let row = document.createElement("tr");
  $("table").append(row);
  let cell1 = document.createElement("td");
  let cell2 = document.createElement("td");
  let cell3 = document.createElement("td");
  let cell4 = document.createElement("td");
  let dltBtn = document.createElement("button");
  /* ^ https://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent
     Fastest method */

  $(dltBtn).text("X")
  .css("width", "8.5rem")
  .css("color", "white")
  .css("background-color", "black")
  .attr("class", "dltBtn");


  $(cell1).html(contact.firstName);
  $(cell2).html(contact.surname);
  $(cell3).html(contact.phone);
  $(cell4).html(contact.address);

  row.append(cell1, cell2, cell3, cell4,dltBtn);


  db.push(contact.firstName, contact.surname, contact.phone, contact.address);

  console.log(db);

  $('.dltBtn').on('click', function(event) {
      event.preventDefault();

    row.remove(dltBtn)
    .deleteCell();

  });

});

// SEARCH
function search(name) {
  for (i = 0; i < db.length; i++) {
    if (!isNaN(name) && db[i] === name) {
      return db[i-2] + "  " + db[i-1] + "   " + db[i] + "  " + db[i+1];
    }
    if (db[i].toUpperCase() === name.toUpperCase()) {
      return db[i] + "  " + db[i+1] + "   " + db[i+2] + "  " + db[i+3];
    }
    $("#found").text("User not found!");
  }


};

$('.searchbutton').on('click', function(event) {
    event.preventDefault();

    var findUserName = $('#query').val();
    var userFound = search(findUserName);

    $("#found").text(userFound);
    console.log(db);
});
});

Answer 1

This example might be more complex than you are needing. Consider creating a db Object with built in functions.

$(function() {
  var db = {
    content: [],
    headers: [
      "First Name",
      "Last Name",
      "Phone",
      "Address",
      " "
    ],
    tableRef: null,
    insert: function(row) {
      this.content.push(row);
      this._drawTable();
    },
    delete: function(row_id) {
      this.content.splice(row_id, 1);
      this._drawTable();
    },
    search: function(term) {
      if (term == undefined || term == "") {
        return false;
      }
      var table = $(this.tableRef);
      $("tbody tr", table).hide().each(function(i, row) {
        if ($("td:eq(0)", row).text().toLowerCase().indexOf(term.toLowerCase()) >= 0) {
          $(row).show();
        }
      });
    },
    _getContent: function(id) {
      this.tableRef = id;
      var table = $(id);
      var headers = [];
      var rows = [];
      $("thead th", table).each(function(i, h) {
        headers.push($(h).text());
      });
      this.headers = headers;
      $("tbody tr", table).each(function(i, r) {
        rows.push({
          firstName: $("td:eq(0)", r).text(),
          surName: $("td:eq(1)", r).text(),
          phone: $("td:eq(2)", r).text(),
          address: $("td:eq(3)", r).text()
        });
      });
      this.content = rows;
      console.log("Content collected from " + this.tableRef, this.content.length + " rows.");
    },
    _drawTable: function() {
      var table;
      if ($(this.tableRef).length) {
        table = $(this.tableRef);
        $("tbody tr", table).remove();
      } else {
        this.tableRef = "#contacts";
        table = $("<table>", {
          id: "contacts"
        }).appendTo("body");
        $("<thead>").appendTo(table);
        $("<tr>").appendTo($("thead", table));
        $.each(this.headers, function(i, h) {
          $("<th>").html(h).appentTo($("thead > tr", table));
        });
        $("<tbody>").appendTo(table);
      }
      var row;
      $.each(this.content, function(i, r) {
        row = $("<tr>").appendTo($("tbody", table));
        $.each(r, function(j, c) {
          $("<td>").html(c).appendTo(row);
        });
      });
      console.log("Table Drawn", this.content.length + " rows");
    }
  };

  db._getContent("#contacts");
  $("#contacts").on("click", ".dlt-btn", function(e) {
    var rId = $(this).closest("tr").index();
    if (confirm("Are you sure you wish to delete this entry?")) {
      db.delete(rId);
    }
  });

  $("#add_contact_form").submit(function(event) {
    event.preventDefault();
    var contact = {
      firstName: $("input:eq(0)", this).val(),
      surName: $("input:eq(1)", this).val(),
      phone: $("input:eq(2)", this).val(),
      address: $("input:eq(3)", this).val()
    };
    db.insert(contact);
    this.reset();
  });

  $("#search_contacts").on("input", "input", function() {
    if ($(this).val().length >= 1) {
      db.search($(this).val());
    } else {
      $(db.tableRef).find("tbody tr").show();
    }
  });
});

#add_contact td,
#add_contact input {
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="search_contacts">
  Search: <input type="text">
</form>
<table id="contacts" width="100%">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Phone</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Homer</td>
      <td>Simpson</td>
      <td>(939)-555-0113</td>
      <td>742 Evergreen Terrace</td>
      <td><button class="dlt-btn">X</button></td>
    </tr>
    <tr>
      <td>Marge</td>
      <td>Simpson</td>
      <td>(939)-555-0113</td>
      <td>742 Evergreen Terrace</td>
      <td><button class="dlt-btn">X</button></td>
    </tr>
    <tr>
      <td>Bart</td>
      <td>Simpson</td>
      <td>(939)-555-0113</td>
      <td>742 Evergreen Terrace</td>
      <td><button class="dlt-btn">X</button></td>
    </tr>
    <tr>
      <td>Lisa</td>
      <td>Simpson</td>
      <td>(939)-555-0113</td>
      <td>742 Evergreen Terrace</td>
      <td><button class="dlt-btn">X</button></td>
    </tr>
    <tr>
      <td>Maggie</td>
      <td>Simpson</td>
      <td>(939)-555-0113</td>
      <td>742 Evergreen Terrace</td>
      <td><button class="dlt-btn">X</button></td>
    </tr>
  </tbody>
</table>
<form id="add_contact_form">
  <table id="add_contact" width="100%">
    <tbody>
      <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td width="30px">&nbsp;</td>
      </tr>
    </tbody>
  </table>
  <button type="submit" id="create-contact">Create Contact</button>
</form>

There are lots of ways to manage Arrays. Please see:

• https://www.w3schools.com/jsref/jsref_push.asp
• https://www.w3schools.com/jsref/jsref_splice.asp
• https://www.w3schools.com/jsref/jsref_indexof_array.asp

Once you adjust the Array you need to either redraw the table or perform the same function to the Table element.

Searching, or in this case, filtering, can be done in a lot of ways too. This is a pretty basic example. You can look at other options if you like.