JavaScript sending element to addEventListener function

Question

I'm trying to make a simple basket on JS and I am having a problem creating a delete button for each table row.

I run the init() function each time new row is added and I put event listeners on three of the cells in each row. Delete button is here:

currentRowDelete.addEventListener('click', deleteRow());

Now the problem is that every time when I click the delete button, I get an MouseEvent object to the function itself and I can't take the rowIndex of the element.

Here is the whole code: https://jsfiddle.net/rnLcjw7u/123/

I need to run the deleteRow function on every "Delete" button click.

P.S. I use only plain JS for this one.

Answer 1

You need to pass an element to the deleteRow function which you can then use to get its parentNode's parentNode to remove its current parentNode (the table row).

You should use a querySelector to get all of the elements with a class of delete to set their click event listeners.

init();
calcTotalSum();

function deleteRow(button) {
	var i = button.rowIndex;
  var p = button.parentElement;
  try{
  p.parentNode.parentNode.removeChild(p.parentNode);
  } catch(err){}
  //document.querySelector("#productBasket").deleteRow(i);
}

function init(){
document.querySelector('.addNewRow').addEventListener('click', addNewRow);
	var rows = document.querySelector('#productBasket').rows;
	var rowLength = rows.length;

  for (var i = 1; i < rowLength; i++) {   
    var input = rows[i];
    var val = input;  
    var currentRowQuantity = val.cells[1].children.quantity;
    var currentRowPrice = val.cells[2].children.price;
    var currentRowDelete = val.cells[3].children[0];
    
    currentRowQuantity.addEventListener('change', calcTotalSum);
  	currentRowPrice.addEventListener('change', calcTotalSum);
    //currentRowDelete.addEventListener('click', deleteRow(currentRowDelete));
    setDelete();
  }
  
}

function setDelete(){
  var deleteBtns = document.querySelectorAll(".delete");
  for(let i = 0; i < deleteBtns.length; i++){
  	deleteBtns[i].addEventListener("click", function(){
    deleteRow(deleteBtns[i]);
    });
  }
}

function addNewRow(){
    var row = document.querySelector('#productBasket').insertRow(-1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    
    cell1.innerHTML = '<input class="text" type="text" name="title">';
    cell2.innerHTML = '<input class="quantity" type="number" name="quantity">';
    cell3.innerHTML = '<input class="price" type="number" name="price">';
    cell4.innerHTML = '<input type="button" class="delete" value="Delete">';
    setDelete();
}

function calcTotalSum() {
	var totalSum = 0;
	var rows = document.querySelector('#productBasket').rows;
	var rowLength = rows.length;

  for (var i = 1; i < rowLength; i += 1) {    
    var input = rows[i];
    var val = input;
    
    var currentRowQuantity = val.cells[1].children.quantity.value;
    var currentRowPrice = val.cells[2].children.price.value;
    
    totalSum += currentRowQuantity * currentRowPrice;
  }
    
  document.querySelector('.totalPrice').textContent = totalSum;
}

<div class="cartMain">
  <div class="productRow">
      <table id="productBasket" style="width:100%">
        <tr>
          <th>Title</th>
          <th>Quantity</th> 
          <th>Price</th>
        </tr>
        
        <tr id="productsList">
          <td><input value = test class="text" type="text" name="title"></td>
          <td><input value = 2 class="quantity" type="number" name="quantity"></td> 
          <td><input value = 20 class="price" type="number" name="price"></td>
          <td><input type="button" class="delete" value="Delete"></td>
        </tr>
      </table>
      
      <button class="addNewRow" type="button">Add new product</button>
            
      <p>Total price:</p> 
      <div class="totalPrice"></div>
  </div>
</div>

Answer 2

The argument passed to the function deleteRow() is an Object that implements the Event interface, to get the button you clicked use either this or event.target. What you want is the rowIndex, the only element that has such a thing is the nearest tr, in this case the parentElement's parentElement or the closest("tr"):

function deleteRow(button) {
  let i = this.closest("tr").rowIndex;
  document.querySelector("#productBasket").deleteRow(i);
}

init();
calcTotalSum();

function deleteRow(button) {
  let i = this.closest("tr").rowIndex;
  document.querySelector("#productBasket").deleteRow(i);
}

function init() {
  document.querySelector('.addNewRow').addEventListener('click', addNewRow);
  var rows = document.querySelector('#productBasket').rows;
  var rowLength = rows.length;

  for (var i = 1; i < rowLength; i += 1) {
    var input = rows[i];
    var val = input;
    var currentRowQuantity = val.cells[1].children.quantity;
    var currentRowPrice = val.cells[2].children.price;
    var currentRowDelete = val.cells[3].children[0];

    currentRowQuantity.addEventListener('change', calcTotalSum);
    currentRowPrice.addEventListener('change', calcTotalSum);
    currentRowDelete.addEventListener('click', deleteRow);
  }
}

function addNewRow() {
  var row = document.querySelector('#productBasket').insertRow(-1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);

  cell1.innerHTML = '<input class="text" type="text" name="title">';
  cell2.innerHTML = '<input class="quantity" type="number" name="quantity">';
  cell3.innerHTML = '<input class="price" type="number" name="price">';
  cell4.innerHTML = '<input type="button" class="delete" value="Delete">';
  init();
}

function calcTotalSum() {
  var totalSum = 0;
  var rows = document.querySelector('#productBasket').rows;
  var rowLength = rows.length;

  for (var i = 1; i < rowLength; i += 1) {
    var input = rows[i];
    var val = input;

    var currentRowQuantity = val.cells[1].children.quantity.value;
    var currentRowPrice = val.cells[2].children.price.value;

    totalSum += currentRowQuantity * currentRowPrice;
  }

  document.querySelector('.totalPrice').textContent = totalSum;
}

<div class="cartMain">
  <div class="productRow">
    <table id="productBasket" style="width:100%">
      <tr>
        <th>Title</th>
        <th>Quantity</th>
        <th>Price</th>
      </tr>

      <tr id="productsList">
        <td><input value=t est class="text" type="text" name="title"></td>
        <td><input value=2 class="quantity" type="number" name="quantity"></td>
        <td><input value=2 0 class="price" type="number" name="price"></td>
        <td><input type="button" class="delete" value="Delete"></td>
      </tr>
    </table>

    <button class="addNewRow" type="button">Add new product</button>

    <p>Total price:</p>
    <div class="totalPrice"></div>
  </div>
</div>