javascript - 删除父 HTML 元素中的 HTML 元素

Question

我有一个基本表格，其中一列应该有一个事件/等待徽章。

我通过我实现的 Websocket 接收此信息。到目前为止工作正常。

我能够在初始渲染时将徽章添加到如下所示的列中:

<td th:id="${car.getBrand()}"><span value="${car.getBrand()}" class="badge badge-success">Active</span></td>

或者这个

<td th:id="${car.getBrand()}"><span value="${car.getBrand()}" class="badge badge-light">Waiting</span></td>

这是在这段代码的帮助下实现的，并完成了它应该做的事情:

  var tableEntry = document.getElementById(message.content[0])
  if (message.content[1] === 'true') {
    var span = document.createElement('span')
    span.value = message.content[0]
    span.innerHTML = '<span class="badge badge-success">Active</span>'
    tableEntry.appendChild(span)
  } else {
    var span = document.createElement('span')
    span.value = message.content[0]
    span.innerHTML = '<span class="badge badge-light">Waiting</span>*'
    tableEntry.appendChild(span)
  }

我的问题是什么？

最后几个小时我试图删除<td>...</td>内现有的span元素。 之前我使用上面创建的函数插入新的跨度代码。匹配的条目应该通过 span 属性 value 找到。我真的很努力，但现在我放弃了。

请帮助我。

Answer 1

根据您具体想要执行的操作，您需要直接编辑所需的确切节点，或者删除旧节点并附加新节点。如果没有更多上下文，我建议直接替换节点:

var tableEntry = document.getElementById(message.content[0])

// Note that we can move the duplicated code to outside if block
// and make it clearer as to exactly the difference between the
// branches
var span = document.createElement('span')
span.value = message.content[0];

if (message.content[1] === 'true') {
  span.innerText = 'Active';
  span.className = 'badge badge-success';
} else {
  span.innerText = 'Waiting';
  span.className = 'badge badge-light';
}

// Here we remove all children
while (tableEntry.firstChild)
  tableEntry.removeChild(tableEntry.firstChild);

// ... before add the new content
tableEntry.appendChild(span);

编辑

如果您更愿意使用 jQuery 来完成此操作，请尝试:

var $newSpan = $('<span>', {'class': 'badge'});
var $td = $('#' + message.content[0]);

if (message.content[1] === 'true')
  $newSpan.addClass('badge-success').text('Active');
else
  $newSpan.addClass('badge-light').text('Waiting');

$td.empty().append( $newSpan );

或者，您可以直接更新那里的跨度:

if ( message.content[1] === 'true' )
  $('#' + message.content[0]).find('span').removeClass('badge-light').addClass('badge-success').text('Active');
else
  $('#' + message.content[0]).find('span').removeClass('badge-success').addClass('badge-light').text('Waiting');