CODEWITHSUNDEEP
javascript
user2261438
user2261438

Reputation: 3

Removing some html tags using javascript

I want to remove some html tags like td and a href using javascript. The data is a ajax returned table data on which I want to perform these operation before showing it on a div in browser page.
1. I want to remove 4th and 5th column of the table (i.e. Stamps and Status)
2. I also want to remove 'a href' tag (along with javascript it contains) from the first column of the row of the table, so that only "Sukhvinder Singh GUJRAL" would remain there.

Here is the code

The headers are:

<table width=0 border=1 cellspacing=0 cellpadding=1><font>
<tr bgcolor=silver align=center>
<th><font style="font-size: 10pt">Name</th>
<th width=60><font style="font-size: 9pt">Entry<br>info</th>
<th width=40><font style="font-size: 9pt">Instant Messaging</th>
<th width=30><font style="font-size: 9pt">Stamps</th>
<th width=40><font style="font-size: 9pt">Status</th>
</tr>

There is just one row in the table, but I am giving example of that row:

<tr bgcolor="#FFFFFF" align=center>
<td align=left><font><a href="javascript:ed_fct('st-eduid%3Ded243547%2Cou%3Dpeople%2Cdc%3Dst%2Cdc%3Dcom')" onmouseover="return true" onmouseout="return true">Sukhvinder Singh GUJRAL</a>
</td>
<td align=center>
<font>&nbsp;<font style="font-size: 8pt">ST person</font>
</td>
<td align=center>
<font color=red>N/A</font>
</td>
<td align=center>
<font><a href="javascript:usm_fct('./Stamping_View/user_stamping_view.php','st-eduid%3Ded243547%2Cou%3Dpeople%2Cdc%3Dst%2Cdc%3Dcom')" onmouseover="return true" onmouseout="return true">stamp</a>
</td>
<td align=center>
<font><font style="color: green">Active</td>
</tr>
</table>

Upvotes: 0

Views: 170

Answers (3)

plalx
plalx

Reputation: 43718

I assume that you are in a callback or something and that xhr is a reference to the XMLHttpRequest object. The trick here is that we create a temporary detached div element and we set it's innerHTML property to xhr.responseText. We then modify the element in memory so that we do not cause multiple DOM reflows. http://jsfiddle.net/S7uK2/

var tempEl = document.createElement('div'),
    textNode = document.createTextNode(),
    els, i, el;

tempEl.innerHTML = xhr.responseText;

//remove a tag
el = tempEl.querySelector('td:first-child a');
textNode.nodeValue = el.innerText;
el.parentNode.replaceChild(textNode, el);

//remove other elements
els = tempEl.querySelectorAll('th:nth-child(n+4), td:nth-child(n+4)');
i = els.length - 1;

while (i >= 0) {
    el = els[i];
    el.parentNode.removeChild(el);
    i--;
}

At this point, tempEl.innerHTML contains the cleaned-up table markup and you can use it to show your table in the DOM.

Upvotes: 0

Pandian
Pandian

Reputation: 9126

Try like below it will help you..

Fiddle Example : http://jsfiddle.net/RYh7U/125/

I have give ID to the Table as tblinfo

JQuery :

You have 5 columns so i have use Slice() to remove last two(4 and 5) columns..

$(document).ready(function() {
  $("#tblinfo th").slice(-2).remove();
  $("#tblinfo td").slice(-2).remove();
   $('#tblinfo td a').each(function(){
    $(this).contents().unwrap();
   });
});

If you don't want the Table ID tblinfo then try like below

Fiddle Example : http://jsfiddle.net/RYh7U/126/

$(document).ready(function() {
  $("th").slice(-2).remove();
  $("td").slice(-2).remove();
  $('td a').each(function(){
  $(this).contents().unwrap();
  });
});

Upvotes: 1

User 99x
User 99x

Reputation: 1021

Check the following JS fiddle for the answer.

http://jsfiddle.net/JLVML/

You can use the following code to remove the anchor tags

$("a").replaceWith($("a").text());

Hope this helps for you.

Upvotes: 0

Related Questions