如何删除使用 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());