CODEWITHSUNDEEP
javascriptjqueryhtml
Anna Klein
Anna Klein

Reputation: 2171

Remove HTML Element in a parent HTML Element

I have a basic table and one column should have an active/waiting badge.

I receive this information by my implemented Websocket. Works fine so far.

I was able to add at initial rendering the badge to the column that it looks like this:

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

or this

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

This was implemented by the help of this code and does what it should do:

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

What is my problem?

The last hours I spent with trying to remove the existing span element inside the <td>...</td> before I insert the new span code with the function I created above. The matching entry should be found by the span attribute value. I really tried hard but I am giving up now.

Please help me.

Upvotes: 0

Views: 102

Answers (3)

Anna Klein
Anna Klein

Reputation: 2171

Since I was asked by an admin to post the solution here, I do it.

This is the code that does the job

  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>'
  }

Thank you for your help, I wouldn't make it without you :)

Upvotes: 0

hunteke
hunteke

Reputation: 3716

Depending on what exactly you want to do, you need to either edit the exact node you want directly, or remove the old node and append a new node. Without more context, I'll suggest replacing the node outright:

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

Edit

If you would rather do this with jQuery, try:

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

Alternatively, you could update the span that's there directly:

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

Upvotes: 1

Casey ScriptFu Pharr
Casey ScriptFu Pharr

Reputation: 1670

Are you just looking for this:

$('td').find('span').remove();

Maybe i am missing something here though, and if so i can better write up a answer. Since i am not sure what is within "message.content[n]", why dont you when building the span, also add a unique ID to it. That way when you go to update the span in your javascript, you can reference the correct one to remove, then append?

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

Does this help? Would be easier if we could see all object properties, and look for object ID or something unique to each object you could use as the id. I like to use custom attributes instead of ID's when building template like this, so i can reference anything based on each object later in page cycle or life quickly.

Upvotes: 1

Related Questions