Removing string in HTML using .replaceWith in jquery

Question

HTML Source

<td>
<a id="ctl00_link_Link1" href="/Default.aspx?ID=10">Link 1</a>
</td>
<td>|</td>
<td>
<a id="ctl00_link_Link2" href="/Default.aspx?ID=11">Link 2</a>
</td>

I need to remove the following string after the document has loaded.

<td>|</td>
<td>
<a id="ctl00_link_Link2" href="/Default.aspx?ID=11">Link 2</a>
</td>

How can I do this ?

I was able to hide the link 2 by using the below,

document.getElementById("ctl00_link_Link2").style.cssText="display:none";

But I want to remove the "|" as well. So trying to use the .replaceWith in jquery like the below, but not working..

$('<td>|</td><td><a id="ctl00_link_Link2" href="/Default.aspx?ID=11">Link 2</a></td>').replaceWith('');

How can i remove the string from HTML source ?

Full TABLE :

<table>
<tbody><tr>
<td><a class="selected-type" id="ctl00_link_english" href="default.aspx?type=English">English</a></td>
<td>|</td>
<td><a id="ctl00_link_spanish" href="default.aspx?type=Spanish">Spanish</a></td>
<td><div style="width:190px;"></div></td>
<td><a title="Decrease Text Size" onclick="javascript:ts('bottom-section', -1)" id="a_descrease_font_size" href="#"><img src="small_font.png"></a></td>
<td><a title="Reset Text Size" onclick="javascript:ts('bottom-section', 0)" id="a_reset_font_size" href="#"><img src="default_font.png"></a></td>
<td><a title="Increase Text Size" onclick="javascript:ts('bottom-section', 1)" id="a_increase_font_size" href="#"><img src="big_font.png"></a></td>
<td><div style="width:20px;"></div></td>
<td><a id="ctl00_link_Link1" href="/Default.aspx?ID=10">Link 1</a>
</td><td>|</td>
<td><a id="ctl00_link_Link2" href="/Default.aspx?ID=11">Link 2</a></td>
<td>&nbsp;&nbsp;&nbsp;</td>
<td><div onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_btn_search')" id="ctl00_pnl_search">
<input type="text" id="ctl00_txt_search" name="ctl00$txt_search">
<div style="display:none"><input type="submit" id="ctl00_btn_search" value="" name="ctl00$btn_search"></div> 
</div></td>
<td>
<input type="image" style="border-width:0px;" src="find.png" id="ctl00_imgbtn_search" name="ctl00$imgbtn_search">
</td>
<td><a target="_blank" href="rss.aspx"><img src="rss.png"></a></td>
</tr>
</tbody></table>

Answer 1

You can just use .replace() on the HTML of the element.

$('.table').html(function(index, html){
  return html.replace('<td>|</td><td><a id="ctl00_link_Link2" href="/Default.aspx?ID=11">Link 2</a></td>', '');
});

EDIT

My above answer would only work with white space exactly right. Definitely not likely.

I went with this instead.

$('table').find('td:gt(0)').remove();

Here is a demo: http://jsbin.com/IkEvofUt/1/edit?html,js,output

Answer 2

尝试这个...

$('#ctl00_link_Link2').closest('td').html(' ').prev().html(' ')

Answer 3

If you just want to replace the |

$('.table').html(function(index, html){
  return html.replace('|','');
})