如何通過單擊從 Array 中刪除元素

Question

我有一個數組，我在一個表中調用它，現在我想做一個按鈕，如果你點擊這個按鈕，最后一個數組被刪除，但它對我不起作用

const show = document.querySelector("#show");
const ul = document.querySelector("ul");
const table = document.querySelector("table")

var th = `
    <th> name</th> 
    <th> Alter</th> 
    <th> Beruf</th> 
    <th>  <div id="reverss"> Revers</div>  </th> `;

const schule = [

  {
    name: "Sam ",
    Alter: "80",
    Beruf: "Mediengestalter"
  },
  {
    name: "Alm",
    Alter: "26",
    Beruf: "PTA"
  },
  {
    name: "Chris",
    Alter: "18",
    Beruf: "AZUBI"
  },
  {
    name: "Smith",
    Alter: "4",
    Beruf: "OKA"
  }
]

table.innerHTML += th + schule.map(info =>
  ` <tr> <td>   ${info.name} </td> <td> ${info.Alter}</td> <td> ${info.Beruf} </td> </tr> <br>`

)

const rever = document.querySelector("#reverss").addEventListener("click", samee);

function samee() {

  schule.pop();
}

Answer 1

1. 您的數組並沒有神奇地綁定到表標記。 您必須自己更改表格內容（或者使用具有數據綁定的框架，例如Vue 、 React或Angular ）。 將生成表格內容的代碼移動到一個函數中，並在最初調用一次，在更改數組后調用一次。
2. 從語義上講， #reverss應該是一個<button>元素。 如果您希望它看起來像普通文本（也不推薦這樣做，因為用戶不會看到它是可點擊的元素），請使用 CSS 覆蓋樣式。
3. 您需要在map() join()之后join() ，否則，您將進行隱式數組到字符串的轉換，從而導致表格后出現懸空的逗號。
4. 在<tr>之后你不需要（而且它實際上是無效的標記）一個<br> ，換行符會自動發生。
5. 您忘記了表格標題周圍的<tr></tr> 。 此外，標題行 (4) 中的列數應與每行中的單元格數相匹配（為：3）。 Eithre 向每一行添加一個空列，或使用colspan屬性。

 const show = document.querySelector("#show"); const ul = document.querySelector("ul"); const table = document.querySelector("table") var th = `<tr> <th> name</th> <th> Alter</th> <th> Beruf</th> <th> <button id="reverss"> Revers</button> </th> </tr>`; const schule = [ {name: "Sam ",Alter: "80",Beruf: "Mediengestalter"},{name: "Alm",Alter: "26",Beruf: "PTA"},{name: "Chris",Alter: "18",Beruf: "AZUBI"},{name: "Smith",Alter: "4",Beruf: "OKA"} ] function populateTable() { table.innerHTML = th table.innerHTML += schule.map(info => `<tr> <td> ${info.name} </td> <td> ${info.Alter}</td> <td> ${info.Beruf} </td> <td></td> </tr>` ).join('') document.querySelector("#reverss").addEventListener("click", samee); } populateTable(); function samee() { schule.pop(); populateTable(); }

 <table> </table>