'In TypeScript, I can't seem to delete a specific value from an HTML table

I'm extremely new with JavaScript and TypeScript (like, day 3). I need to let the user delete a value that they entered into a table. I've been working on this one problem for several, several hours and nothing I've tried has worked. Any help would be greatly appreciated.

This is my html: 

<head>
    <meta charset="UTF=8">
    <meta name ="viewport" content="width-device-width, initial-scale=1.0">
    <title>CCP Tier 2 Week 1</title>

    <link rel="stylesheet" href="ccpt2w1.css">
    <script src="ccpt2w1.js"></script>

</head>

<body>
    <div class="topOfPage">
        <h1>To-Do List</h1><br/>
    </div>
    <div class="flexboxRow"> 
        <div class="flexboxColumn">
            <form name="manageItems">
                <h2>Manage My To-Dos</h2>
                <br/>
                <label for="toDoItem">To-Do Item : </label>
                <input type="text" id="toDoItem" name="toDoItem"><br/> <br/>
                <button type="button" onclick="addItem()">Add Item</button>
                <button type="button" onclick="deleteItem()">Delete Item</button>
                <button type="button" onclick="checkItem()">Mark Complete</button><br/>
            </form>
        </div>
        <div class="flexboxColumn">   
            <!-- <form name="toDoList"> -->
                <h2>My To-Dos</h2>
                <table id="toDoTable">
                </table>
                <br/><br/>
                <button type="button" onclick="clearList()">Clear the List</button>
            <!-- </form> --> 
        </div>       
    </div>
</body>
</html>

This is my ts file:

function addItem() {
    var newItem = document.forms["manageItems"]["toDoItem"].value;

    if (newItem == "") {
        alert("Please enter a to-do item.")
        return false;
    }
    else {
        var tableRef = document.getElementById("toDoTable") as HTMLTableElement;
        (tableRef.insertRow(tableRef.rows.length)).innerHTML = newItem
        document.forms["manageItems"]["toDoItem"].value = ""; // clears the input field after the value has been added to the list.
        /* return true; */
    }
}

function deleteItem() {
    var tableRef = document.getElementById("toDoTable") as HTMLTableElement;
    var itemToRemove = document.forms["manageItems"]["toDoItem"].value;
    if (itemToRemove == "") {
        alert("Please enter an item to delete.")
        return false;
    }
    else {
        document.getElementById("tableRef").deleteRow("itemToRemove");
        tableRef.value = "";
        document.forms["manageItems"]["toDoItem"].value = ""; // clears the input field after the value has been added to the list.
    }


}

function clearList() {
    var tableRef = document.getElementById("toDoTable");
    tableRef.innerHTML = ""; 
}
javascripthtmltypescript


Solution 1:[1]

  1. when adding - check if there is such an element
  2. for search (when deleting), create an attribute
  3. when deleting, search by attribute and delete

const createId = (str) => {
  return `id_${str.replace(/ /ig, '_')}`;
}

function addItem() {
  const newItem = document.forms['manageItems']['toDoItem'].value;

  if (newItem == '') {
    alert('Please enter a to-do item.')
    return false;
  } else {
    const tableRef = document.getElementById('toDoTable');
    /** check if there is such an element */
    const tr = document.querySelector(`[data-id="${createId(newItem)}"]`);
    if (tr) {
      alert('has already')
      return false;
    }

    const row = (tableRef.insertRow(tableRef.rows.length));
    row.innerHTML = `<td>${newItem}</td>`;
    /** create and add an attribute */
    row.dataset.id = createId(newItem)

    document.forms['manageItems']['toDoItem'].value = ''; // clears the input field after the value has been added to the list.
    /* return true; */
  }
}

function deleteItem() {
  const tableRef = document.getElementById('toDoTable');
  const itemToRemove = document.forms['manageItems']['toDoItem'].value;
  if (itemToRemove == '') {
    alert('Please enter an item to delete.')
    return false;
  } else {
    /** search by attribute and delete */
    const tr = document.querySelector(`[data-id="${createId(itemToRemove)}"]`);
    if (!tr) {
      alert('...');
      return false;
    }
    tr.remove();
    document.forms['manageItems']['toDoItem'].value = ''; // clears the input field after the value has been added to the list.
  }


}

function clearList() {
  const tableRef = document.getElementById('toDoTable');
  tableRef.innerHTML = '';
}
<div class="topOfPage">
        <h1>To-Do List</h1><br/>
    </div>
    <div class="flexboxRow"> 
        <div class="flexboxColumn">
            <form name="manageItems">
                <h2>Manage My To-Dos</h2>
                <br/>
                <label for="toDoItem">To-Do Item : </label>
                <input type="text" id="toDoItem" name="toDoItem"><br/> <br/>
                <button type="button" onclick="addItem()">Add Item</button>
                <button type="button" onclick="deleteItem()">Delete Item</button>
                <button type="button" onclick="checkItem()">Mark Complete</button><br/>
            </form>
        </div>
        <div class="flexboxColumn">   
            <!-- <form name="toDoList"> -->
                <h2>My To-Dos</h2>
                <table id="toDoTable">
                </table>
                <br/><br/>
                <button type="button" onclick="clearList()">Clear the List</button>
            <!-- </form> --> 
        </div>       
    </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions