03_js-dom/unterricht/tag23/03_product-manager/assets/js/main.js

@@ -49,11 +49,34 @@
     const { name, price } = product;
     const tdNameEl = createTd(name, 'td-name');
     const tdPriceEl = createTd(price, 'td-price');
-    const trEl = createTr(tdNameEl, tdPriceEl);
+    const tdActionsEl = createTdWithActions();
+
+    const trEl = createTr(tdNameEl, tdPriceEl, tdActionsEl);
 
     DOM.tbody.appendChild(trEl);
   };
 
+  const createTdWithActions = () => {
+    const td = document.createElement('td');
+    td.classList.add('td-actions');
+
+    const btnRemove = document.createElement('button');
+    const icon = document.createElement('i');
+    const span = document.createElement('span');
+
+    btnRemove.classList.add('btn', 'btn-danger', 'button-product-remove');
+    icon.classList.add('fas', 'fa-trash-can');
+    span.classList.add('visually-hidden');
+    span.textContent = 'Remove Product';
+
+    btnRemove.appendChild(icon);
+    btnRemove.appendChild(span);
+
+    td.appendChild(btnRemove);
+
+    return td;
+  };
+
   const createTd = (text, ...classNames) => {
     const td = document.createElement('td');
     td.classList.add(...classNames);

03_js-dom/unterricht/tag23/03_product-manager/index.html

@@ -22,17 +22,24 @@
               <tr>
                 <th class="th-name">Name</th>
                 <th class="th-price">Price in &euro;</th>
+                <th class="th-actions">Actions</th>
               </tr>
             </thead>
             <tbody>
               <!-- <tr>
                 <td class="td-name">{PRODUCT_NAME}</td>
                 <td class="td-price">{PRODUCT_PRICE}</td>
+                <td class="td-actions">
+                  <button class="btn btn-danger button-product-remove">
+                    <i class="fas fa-trash-can"></i>
+                    <span class="visually-hidden">Remove Product</span>
+                  </button>
+                </td>
               </tr> -->
             </tbody>
             <tfoot>
               <tr>
-                <td colspan="2">
+                <td colspan="3">
                   <div class="row">
                     <div class="col-12 col-md-6 col-lg-6">
                       <input