如何刪除使用 Javascript 創建的 HTML 元素

Question

我已經使用 Javascript 創建了 HTML 標記現在我想在單擊時刪除該元素，但它不起作用

      if (tBody) {
        return (
          `<tr class="tr1">  
    
    
            <th class="th1"> Category Name </th> 
            <th class="th1">Delete </th> 
    
    
        </tr>` +
          getdata.data
            .map(function (wizard) {
              return `<tr class="td1">  <td class=".th1"> ${wizard.categoryName}</td> 
                <td class="td1"><a class="delClass" onclick="removeCat()" data-remove="${JSON.stringify(wizard._id)}"   href="#">Delete</a></td>
                
                </tr>`;
            })
            .join('')
        );

現在我想在單擊時刪除上述元素，但我使用getElementsByClassName和其他方法但它不起作用

錯誤消息和代碼圖像

新圖像**********

在此處輸入圖像描述

html 是動態渲染的

這是圖片

數據刪除圖像在這里********

Answer 1

您可以使用.closest()查找tr並將其刪除：

 function removeCat(e) { e.closest('tr').remove() };

 <table> <tr> <td>1</td> <td><button onclick="removeCat(this)">-</button> </tr> <tr> <td>2</td> <td><button onclick="removeCat(this)">-</button> </tr> <tr> <td>3</td> <td><button onclick="removeCat(this)">-</button> </tr> </table>

此外，我看到您的刪除按鈕具有 class delClass ，因此您可以向此 class 添加事件偵聽器並避免使用內聯腳本。 例如：

 var elements = document.getElementsByClassName("delClass"); var removeCat = function() { console.log(this.dataset.remove) this.closest('tr').remove(); }; for (var i = 0; i < elements.length; i++) { elements[i].addEventListener('click', removeCat, false); }

 <table> <tr> <td>1</td> <td><button class="delClass" data-remove="1">-</button> </tr> <tr> <td>2</td> <td><button class="delClass" data-remove="2">-</button> </tr> <tr> <td>3</td> <td><button class="delClass" data-remove="3">-</button> </tr> </table>

Answer 2

您使用查詢選擇器和remove方法：

tBody.querySelectorAll('tr').forEach(tr => tr.remove());

或者，如果您的表有其他您不想刪除的行，那么您必須有一種方法來准確定位這些行。 要么給他們一些特殊class ，要么你可以使用你已經給的那些：

tBody.querySelectorAll('.tr1, .td1').forEach(tr => tr.remove());