title: Remove HTML Element in a parent HTML Element
body: <p>I have a basic table and one column should have an active/waiting badge.</p>
  
  <p>I receive this information by my implemented Websocket. Works fine so far.</p>
  
  <p>I was able to add at initial rendering the badge to the column that it looks like this:</p>
  
  <pre><code>&lt;td th:id="${car.getBrand()}"&gt;&lt;span value="${car.getBrand()}" class="badge badge-success"&gt;Active&lt;/span&gt;&lt;/td&gt;
  </code></pre>
  
  <p>or this</p>
  
  <pre><code>&lt;td th:id="${car.getBrand()}"&gt;&lt;span value="${car.getBrand()}" class="badge badge-light"&gt;Waiting&lt;/span&gt;&lt;/td&gt;
  </code></pre>
  
  <p>This was implemented by the help of this code and does what it should do:</p>
  
  <pre><code>  var tableEntry = document.getElementById(message.content[0])
    if (message.content[1] === 'true') {
      var span = document.createElement('span')
      span.value = message.content[0]
      span.innerHTML = '&lt;span class="badge badge-success"&gt;Active&lt;/span&gt;'
      tableEntry.appendChild(span)
    } else {
      var span = document.createElement('span')
      span.value = message.content[0]
      span.innerHTML = '&lt;span class="badge badge-light"&gt;Waiting&lt;/span&gt;*'
      tableEntry.appendChild(span)
    }
  </code></pre>
  
  <p><strong>What is my problem</strong>?</p>
  
  <p>The last hours I spent with trying to remove the existing span element inside the <code>&lt;td&gt;...&lt;/td&gt;</code> <strong>before</strong> I insert the new span code with the function I created above. The matching entry should be found by the span attribute <em>value</em>. I really tried hard but I am giving up now.</p>
  
  <p>Please help me.</p>