Удаление строки таблицы JS

#javascript #html5

Всем здравствуйте, столкнулся со следующей проблемой. Необходимо при нажатии на чекбокс
в конкретной строке таблицы удалять эту строку из таблицы. Использую конструкцию 

checkbox.addEventListener("click", function () {
        var row1 = document.getElementById("checkbox_id").parentNode.parentNode;
    });


Так я получаю строку. Но получаю не ту строку, в которой жму чекбокс, а первую. Это
первый мой косяк. А второй - не могу понять как ее удалить. Понимаю, что нужно использовать
removeChild, но собрать это воедино не выходит. Помогите пожалуйста.



function insertRow(id) {
  var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
  var row;
  row = document.createElement("tr");
  row.setAttribute("id", "tr_id");
  var cellCounter = document.getElementById("myTable").rows.length;

  var td1 = document.createElement("td");
  td1.setAttribute("id", "td1_id");
  td1.appendChild(document.createTextNode(cellCounter));

  var td2 = document.createElement("td");
  td2.setAttribute("id", "td2_id");
  var checkbox = document.createElement("input");
  checkbox.setAttribute("type", "checkbox");
  checkbox.setAttribute("id", "checkbox_id");
  checkbox.addEventListener("click", function() {
    var row1 = document.getElementById("checkbox_id").parentNode.parentNode;
    //        row1.parentNode.removeChild(row1);
    console.log(row1);
  });
  td2.appendChild(checkbox);

  var td3 = document.createElement("td");
  td3.setAttribute("id", "td3_id");
  td3.appendChild(document.createTextNode(document.getElementById("add_id").value));

  var td4 = document.createElement("td");
  td4.setAttribute("id", "td4_id");
  td4.appendChild(document.createTextNode(document.getElementById("quant_id").value));

  var td5 = document.createElement("td");
  td5.setAttribute("id", "td5_id");
  td5.appendChild(document.createTextNode(document.getElementById("price_id").value));

  var td6 = document.createElement("td");
  td6.setAttribute("id", "td6_id");
  var btnEdit = document.createElement("input");
  btnEdit.setAttribute("class", "btnEdit");
  btnEdit.src = "icons/edit.png";
  btnEdit.type = "image";
  btnEdit.addEventListener('click', function() {
    editButton();
    return false;
  });
  td6.appendChild(btnEdit);

  var deleteButton = document.createElement("input");
  deleteButton.setAttribute("class", "deleteButton");
  deleteButton.src = "icons/delete.png";
  deleteButton.type = "image";
  deleteButton.addEventListener('click', function() {
    delButton();
    return false;
  });
  td6.appendChild(deleteButton);
  td6.setAttribute("colspan", "2");
  row.appendChild(td1);
  row.appendChild(td2);
  row.appendChild(td3);
  row.appendChild(td4);
  row.appendChild(td5);
  row.appendChild(td6);
  tbody.appendChild(row);

  localStorage.setItem("ShoppingList", document.getElementById("myTable").innerHTML);
}

  

    

      

        

          #
        
        

          Done
        
        

          Item
        
        

          Quantity
        
        

          Price $
        
        

          Action
        
      
    
  




    

Ответы

Ответ 1

Что бы вам получить доступ к элементу, который вызвал функцию вам надо

checkbox.addEventListener("click", function (e) {
        var checkboxElement = e.target; // элемент который вызвал функцию
    });


либо

checkbox.addEventListener("click", function () {
        var checkboxElement = this; // элемент который вызвал функцию
    });


Что бы удалить элемент надо

ell.parentElement.removeChild(ell);


в вашем случае

ell = checkboxElement.parent.parent; // tr element (ваша строчка)
ell.parentElement.removeChild(ell); // удаляем всю строку


или более красиво

ell = checkboxElement.closest("tr"); // tr element (ваша строчка)
ell.parentElement.removeChild(ell); // удаляем всю строку


Ответ 2

Без привязки к id :



Array.from(document.querySelectorAll('input[type="checkbox"]')).forEach(function(e) {
  e.addEventListener('click', function() {
    var a = this.closest('tr');
    a.parentElement.removeChild(a);
  });
});

  

    

      

        

          #
        
        

          Done
        
        

          Item
        
        

          Quantity
        
        

          Price $
        
        

          Action
        
        

          Remove
        
      

      

        

          1
        
        

          1
        
        

          1
        
        

          1
        
        

          1
        
        

          1
        
        


        

          

            2
          
          

            2
          
          

            2
          
          

            2
          
          

            2
          
          

            2