Всем здравствуйте, столкнулся со следующей проблемой. Необходимо при нажатии на чекбокс в конкретной строке таблицы удалять эту строку из таблицы. Использую конструкцию
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 | |
Ответ
Что бы вам получить доступ к элементу, который вызвал функцию вам надо
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); // удаляем всю строку
Комментариев нет:
Отправить комментарий