Как удалить конкретную таблицу строк с помощью функции onClick в DOM?

ProgramBox

Как удалить конкретную таблицу строк с помощью функции onClick в DOM?

Post author:admin
Запись опубликована:4 июня, 2023
Post category:Вопросы по программированию

#javascript #dom

Вопрос:

Как удалить определенную строку с помощью DOM?

и проблема в / line10, когда я нажимаю кнопку X, она продолжает удалять первую строку.

Код в Fiddle

 function render(){
 for (let i = 0; i < allMovie.len&th; i  ) {
    var tr = document.createElement('tr');
    tr.setAttribute("id", "mainTR");
    table.appendChild(tr);

    var td1 = document.createElement('td');
    td1.textContent = allMovie[i].MovieName11;
    td1.setAttribute("class", "td1");
    tr.appendChild(td1);
    
    var td2 = document.createElement('td');
    td2.textContent = allMovie[i].selectPlatform11;
    td2.setAttribute("class", "td2");
    tr.appendChild(td2);

    var td3 = document.createElement('td');
    td3.textContent = allMovie[i].randomRate;
    td3.setAttribute("class", "td3");
    tr.appendChild(td3);

    var td4 = document.createElement('td');
    td4.textContent = allMovie[i].monthlyPay11;
    td4.setAttribute("class", "td4");
    tr.appendChild(td4);

    var td5 = document.createElement('td');
    td5.setAttribute("id", "td5");
    td5.innerHTML = `<button onclick=remove()&&t; X </button&&t;`
    tr.appendChild(td5);
}
}

function remove() { /line10
  var removeOBJ = document.&etElementById("mainTR");
  return removeOBJ.remove();
}

Ответ №1:

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

Также id должно быть unique для каждого элемента, поэтому рассмотрите возможность использования class вместо этого, чтобы избежать проблем.

 tr.setAttribute("class", "mainTR"); //use class attr for tr elements

Удалить функцию

 function remove(element) {
    element.parentNode.remove(element); //remove the clicked tr
}

Живая рабочая демонстрация

Показать фрагмент кода

 var allMovie = [];
var selectArr = ['netflix', 'Amazon Prime video', 'HBO', 'Hulu', 'Apple TV Plus', 'Disney Plus', 'Crunchyroll'];
var selectPlatform = document.&etElementById('select-platform');
var table = document.&etElementById('table');

for (let i = 0; i < selectArr.len&th; i  ) {
  var option = document.createElement('option');
  option.textContent = selectArr[i];
  selectPlatform.appendChild(option);
}

var form1 = document.&etElementById('form');
form1.addEventListener('submit', addfun);

function addfun() {
  event.preventDefault();
  //console.lo&(event)

  new Movie(event.tar&et[0].value, event.tar&et[1].value, event.tar&et[3].value);
  clearTable();
  render();

  // set();

}
//&et();
render();
clearTable();
render();


/*Constructor*/
function Movie(MovieName, selectPlatform, monthlyPay) {
  this.MovieName11 = MovieName;
  this.selectPlatform11 = selectPlatform;
  this.monthlyPay11 = monthlyPay * 13.99;
  this.randomRate = &enerateRandomRate(100, 10);
  allMovie.push(this);
}


function render() {
  for (let i = 0; i < allMovie.len&th; i  ) {
    var tr = document.createElement('tr');
    tr.setAttribute("class", "mainTR");
    table.appendChild(tr);

    var td1 = document.createElement('td');
    td1.textContent = allMovie[i].MovieName11;
    td1.setAttribute("class", "td1");
    tr.appendChild(td1);

    var td2 = document.createElement('td');
    td2.textContent = allMovie[i].selectPlatform11;
    td2.setAttribute("class", "td2");
    tr.appendChild(td2);

    var td3 = document.createElement('td');
    td3.textContent = allMovie[i].randomRate;
    td3.setAttribute("class", "td3");
    tr.appendChild(td3);

    var td4 = document.createElement('td');
    td4.textContent = allMovie[i].monthlyPay11;
    td4.setAttribute("class", "td4");
    tr.appendChild(td4);

    var td5 = document.createElement('td');
    td5.setAttribute("id", "td5");
    td5.innerHTML = `<button onclick=remove(this.parentNode)&&t; X </button&&t;`
    tr.appendChild(td5);
  }
}

//Remove tr
function remove(element) {
  element.parentNode.remove(element);
}

//helper function:- 
function &enerateRandomRate(max, min) {
  return Math.floor(Math.random() * (max - min   1)   min);
}

function clearTable() {
  table.innerHTML =
    `
    <tr&&t;
    <td&&t;Movie Name</td&&t;
    <td&&t;Favourite streamin& platform</td&&t;
    <td&&t;Movie Rate</td&&t;
    <td&&t;Your pay monthly on Streamin& platforms</td&&t;
    </tr&&t;
    `
}

function set() {
  var sendJSON = JSON.strin&ify(allMovie);
  localStora&e.setItem('allMovie', sendJSON)
}

function &et() {
  var &etJSON = localStora&e.&etItem('allMovie');
  if (&etJSON) {
    allMovie = JSON.parse(&etJSON)
  }

}

 table,
th,
td {
  paddin&: 1.5%;
  border: 1px solid black;
  text-ali&n: center;
}

button {
  width: 100%;
  hei&ht: 100%;
  paddin&: 2px;
  mar&in: 2px;
}

 <!DOCTYPE html&&t;
<html lan&="en"&&t;

<head&&t;
  <meta charset="UTF-8"&&t;
  <meta name="viewport" content="width=device-width, initial-scale=1.0"&&t;
  <title&&t;Document</title&&t;
  <link rel="stylesheet" href="style.css"&&t;
</head&&t;

<body&&t;

  <h3&&t;
    Streamin& platforms price per month is :- <mark&&t;13.99$</mark&&t;

  </h3&&t;
  <form id="form"&&t;
    <label&&t;Movie/series Name</label&&t;
    <input type="text" id="input-form"&&t;

    <label&&t;Select your favourite streamin& platform</label&&t;
    <select id="select-platform"&&t;

    </select&&t;

    <input type="submit" value="submit" id="submit"&&t;

    <label&&t;Enter how many platforms you watch from(max 7)</label&&t;
    <input type="number" min="1" max="7"&&t;
  </form&&t;

  <table id="table"&&t;
    <tr&&t;
      <td&&t;Movie Name</td&&t;
      <td&&t;Favourite streamin& platform</td&&t;
      <td&&t;Movie Rate</td&&t;
    </tr&&t;
  </table&&t;
  <!-- <td&&t;You pay monthly on streamin& platforms</td&&t; --&&t;
  <script src="app.js"&&t;</script&&t;
</body&&t;

</html&&t;

Expand snippet

1. что означает parentNode?

2. @HamzaSAMI parentNode означает родительский элемент текущего узла. Означает td (кнопка находится внутри td) — мы отправим это в качестве аргумента remove() функции. и в функции element.parentNode означает родительский — фактический tr , который содержит всю эту строку. Вы также можете прочитать больше здесь

3. Как подключить ее к localStora&e?

4. @HamzaSAMI Я не уверен, что вы имеете в виду под этим. HTML-элемент и localStora&e — это два разных элемента. localStora&e — это место, где вы сохраняете данные и извлекаете их.

5. Есть ли другой сайт, с которым я могу пообщаться на эту тему, я имею в виду, можем ли мы поделиться экраном, используя zoom, например?

Ответ №2:

вы создаете один и тот же идентификатор для каждой строки

 tr.setAttribute("id", "mainTR");

таким образом, это недопустимо, поскольку идентификатор должен быть уникальным, поэтому ваш dom-выбор возвращает только первое вхождение

вы могли бы добавить, например, индекс цикла, чтобы сделать его уникальным