Javascript 删除父HTML元素中的HTML元素

我有一个基本表，其中一列应该有一个活动/等待徽章

我通过实现的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)
  }

var tableEntry=document.getElementById（message.content[0]）
if（message.content[1]='true'）{
var span=document.createElement（'span'）
span.value=message.content[0]
span.innerHTML='Active'
tableEntry.appendChild（span）
}否则{
var span=document.createElement（'span'）
span.value=message.content[0]
span.innerHTML='Waiting*'
tableEntry.appendChild（span）
}

我的问题是什么

在插入带有我在上面创建的函数的新span代码之前，我花了最后几个小时试图删除

..

中的现有span元素。应通过span属性值找到匹配的条目。我真的很努力，但现在我放弃了

---

请帮助我。

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

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 );

---

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

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 );

---

你只是在找这个：

$（'td'）.find（'span'）.remove（）

也许我在这里遗漏了什么，如果是这样，我最好写一个答案。既然我不确定“message.content[n]”中包含什么，为什么不在构建span时，也为其添加一个唯一的ID呢。这样，当您在javascript中更新span时，可以引用正确的span来删除，然后追加

//remove it
$('td').find('#yourSpanId').remove()
//now assign id to new span object
span.id = message.propetyToUseAsId //i do not know all properties of your object
var span = document.createElement('span')
span.value = message.content[0]
span.innerHTML = '<span class="badge badge-light">Waiting</span>*'
/***********  soemthing like this *************/
span.id = message.propetyToUseAsId //i do not know all properties of your object
tableEntry.appendChild(span)

//删除它
$（'td'）。查找（'yourSpanId'）。删除（）
//现在将id分配给新的span对象
span.id=message.propertytouseasid//我不知道对象的所有属性
var span=document.createElement（'span'）
span.value=message.content[0]
span.innerHTML='Waiting*'
/***********像这样吗*************/
span.id=message.propertytouseasid//我不知道对象的所有属性
tableEntry.appendChild（span）

---

这有用吗？如果我们可以查看所有对象属性，并查找对象ID或每个对象唯一的ID，这会更容易。在构建这样的模板时，我喜欢使用自定义属性而不是ID，这样我可以在页面周期或生命周期的后期快速引用基于每个对象的任何内容。

您是否正在查找以下内容：

$（'td'）.find（'span'）.remove（）

也许我在这里遗漏了什么，如果是这样，我最好写一个答案。既然我不确定“message.content[n]”中包含什么，为什么不在构建span时，也为其添加一个唯一的ID呢。这样，当您在javascript中更新span时，可以引用正确的span来删除，然后追加

//remove it
$('td').find('#yourSpanId').remove()
//now assign id to new span object
span.id = message.propetyToUseAsId //i do not know all properties of your object
var span = document.createElement('span')
span.value = message.content[0]
span.innerHTML = '<span class="badge badge-light">Waiting</span>*'
/***********  soemthing like this *************/
span.id = message.propetyToUseAsId //i do not know all properties of your object
tableEntry.appendChild(span)

//删除它
$（'td'）。查找（'yourSpanId'）。删除（）
//现在将id分配给新的span对象
span.id=message.propertytouseasid//我不知道对象的所有属性
var span=document.createElement（'span'）
span.value=message.content[0]
span.innerHTML='Waiting*'
/***********像这样吗*************/
span.id=message.propertytouseasid//我不知道对象的所有属性
tableEntry.appendChild（span）

---

这有用吗？如果我们可以查看所有对象属性，并查找对象ID或每个对象的唯一ID，则会更容易。我喜欢在构建这样的模板时使用自定义属性而不是ID，因此，我可以在页面周期或生命周期的后期快速引用基于每个对象的任何内容。

因为管理员要求我在此处发布解决方案，所以我这样做了

这是执行此任务的代码

  var message = JSON.parse(payload.body)

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

var message=JSON.parse（payload.body）
var tableEntry=document.getElementById（message.content[0]）
tableEntry.removeChild（tableEntry.firstChild）
if（message.content[1]='true'）{
tableEntry.innerHTML='Active'
}否则{
tableEntry.innerHTML='Waiting'
}

---

谢谢你的帮助，没有你我是做不到的：）

因为一位管理员让我在这里发布解决方案，我就这么做了

这是执行此任务的代码

  var message = JSON.parse(payload.body)

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

var message=JSON.parse（payload.body）
var tableEntry=document.getElementById（message.content[0]）
tableEntry.removeChild（tableEntry.firstChild）
if（message.content[1]='true'）{
tableEntry.innerHTML='Active'
}否则{
tableEntry.innerHTML='Waiting'
}

---

谢谢你的帮助，没有你我是不会成功的：）

你是想把所有的东西都移到所有的东西里面还是目标里面？例如，如果自定义属性标记值匹配或单击事件或索引等？您有权访问jquery吗？我尝试仅删除tr中的范围内容。idendifier应该是范围内的值字段。因为我已经为tr元素使用了id字段，所以我想我不能在span中使用它来删除它。是的，我有权访问JQuery。请不要在您的问题中编辑解决方案。相反，请将解决方案发布为下面的答案。这个网站的格式总是“问题在上面，答案在下面”。你是想把所有的都移到所有的里面还是目标里面？例如，如果自定义属性标记值匹配或单击事件或索引等？您有权访问jquery吗？我尝试仅删除tr中的范围内容。idendifier应该是范围内的值字段。因为我已经为tr元素使用了id字段，所以我认为我可以