JavaScript отправляющий элемент в функцию addEventListener

Question

JavaScript отправляющий элемент в функцию addEventListener

1

Я пытаюсь создать простую корзину в JS, и у меня возникла проблема с созданием кнопки удаления для каждой строки таблицы.

Я запускаю функцию init() каждый раз, когда добавляется новая строка, и я помещаю прослушиватели событий в три ячейки в каждой строке. Кнопка "Удалить" находится здесь:

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

Теперь проблема в том, что каждый раз, когда я нажимаю кнопку "Удалить", я получаю объект MouseEvent для самой функции, и я не могу взять rowIndex элемента.

Вот весь код: https://jsfiddle.net/rnLcjw7u/123/

Мне нужно запустить функцию deleteRow при каждом нажатии кнопки "Удалить".

PS Я использую только простой JS для этого.

Спасибо.

The50 30 июль 2018, в 21:56

Источник

Теги:

javascript

javascript-events

addeventlistener

2 ответа

0

Вам нужно передать элемент функции deleteRow который затем можно использовать, чтобы получить parentNode parentNode, чтобы удалить его текущий parentNode (строка таблицы).

Вы должны использовать querySelector, чтобы получить все элементы с классом delete чтобы установить прослушиватели событий кликов.

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>

hev1 30 июль 2018, в 18:04

Ещё вопросы

Luca Kiebel · Accepted Answer · 2018-07-30T16-19-00.000Z

Аргумент, переданный функции deleteRow() представляет собой объект, который реализует интерфейс Event, чтобы получить нажатую кнопку, используя this или event.target. То, что вы хотите, это rowIndex, единственным элементом, который имеет такую вещь, является ближайший tr, в этом случае parentElement parentElement или 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>

Также исправлено, как вы добавили eventListener в цикл for в init
Большое спасибо, почему-то потерял идею, что я все еще могу использовать объект "this" внутри функции. Который в этом случае был самой кнопкой удаления.