javascript - 如何使用 jQuery/Javascript 隐藏 anchor 标记之前的元素？

Question

我目前正在 Blackbaud/Convio CRM 工作，我有一个关于使用 Javascript 或 jQuery 隐藏从后端渲染到 DOM 上的元素的问题。下面是从后端渲染到 DOM 上的代码:

<div id="wrapperBlock">
<div class="topList">TOP COLORS</div>
    &nbsp;&nbsp;1&nbsp;-&nbsp;
    <a href="http://rcf.convio.net/site/TR?company_id=1025&amp;fr_id=1341&amp;pg=company">Orange</a>
    &nbsp;($100)
    <br />
    &nbsp;&nbsp;2&nbsp;-&nbsp;
    <a href="http://rcf.convio.net/site/TR?company_id=1022&amp;fr_id=1341&amp;pg=company">Black</a>
    &nbsp;($80)
    <br />
    &nbsp;&nbsp;3&nbsp;-&nbsp;
    <a href="http://rcf.convio.net/site/TR?company_id=1026&amp;fr_id=1341&amp;pg=company">Green</a>
    &nbsp;($75)
    <br />
    &nbsp;&nbsp;4&nbsp;-&nbsp;
    <a href="http://rcf.convio.net/site/TR?company_id=1024&amp;fr_id=1341&amp;pg=company">Yellow</a>
    &nbsp;($68)
    <br />
    &nbsp;&nbsp;5&nbsp;-&nbsp;
    <a href="http://rcf.convio.net/site/TR?company_id=1020&amp;fr_id=1341&amp;pg=company">Blue</a>
    &nbsp;($55)
    <br />
    &nbsp;&nbsp;6&nbsp;-&nbsp;
    <a href="http://rcf.convio.net/site/TR?company_id=1027&amp;fr_id=1341&amp;pg=company">Red</a>
    &nbsp;($43)
    <br />
    &nbsp;&nbsp;7&nbsp;-&nbsp;
    <a href="http://rcf.convio.net/site/TR?company_id=1021&amp;fr_id=1341&amp;pg=company">Purple</a>
    &nbsp;($30)
    <br />
    &nbsp;&nbsp;8&nbsp;-&nbsp;
    <a href="http://rcf.convio.net/site/TR?company_id=1023&amp;fr_id=1341&amp;pg=company">Pink</a>
    &nbsp;($47,546.81)
    <br />
</div>

页面上的输出如下所示:

1 - Orange ($100)
2 - Black ($80)
3 - Green ($75)
4 - Yellow ($68)
5 - Blue ($55)
6 - Red ($43)
7 - Purple ($30)
8 - Pink ($20)

我想隐藏每种颜色之前出现的数字、连字符和空格。此外，是否可以隐藏包含每个美元金额的左括号和右括号？

要删除“1 - ”，我尝试了以下操作:

<script type="text/javascript">
$(document).ready(function(){
    $('#progress-companies').html().remove('&nbsp;&nbsp;1&nbsp;-&nbsp;');
});
</script>

有人可以给我一个关于如何去掉数字、破折号和括号的提示吗？我需要正则表达式吗？

编辑/更新:

哦，我在某个地方使用了 @Sangeet-Menon 解决方案中的一行代码 Hide a character in text with jQuery?

      $('#progress-companies').html($('#progress-companies').html().replace("  1 - ",""));
});

Answer 1

假设您只想保留 <a>元素，据我所知，我建议避免使用正则表达式¹，只需:

// iterate over each of the '<a>' elements inside of the '#wrapperBlock':
$('#wrapperBlock a').each(function(){
  // caching the current node:
  var self = this;
  // removing the current node's previousSibling, the textNode
  // containing the characters you want to remove, from the parentNode:
  self.parentNode.removeChild(self.previousSibling);
  // removing the parentheses from the current node's nextSibling
  // (this is text, not HTML) using a regular expression and String.replace():
  self.nextSibling.nodeValue = self.nextSibling.nodeValue.replace(/\(|\)/g,'');
});

$('#wrapperBlock a').each(function(){
  var self = this;
  self.parentNode.removeChild(self.previousSibling);
  self.nextSibling.nodeValue = self.nextSibling.nodeValue.replace(/\(|\)/g,'');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapperBlock">
  <div class="topList">TOP COLORS</div>
  &nbsp;&nbsp;1&nbsp;-&nbsp;
  <a href="http://rcf.convio.net/site/TR?company_id=1025&amp;fr_id=1341&amp;pg=company">Orange</a>
  &nbsp;($100)
  <br />&nbsp;&nbsp;2&nbsp;-&nbsp;
  <a href="http://rcf.convio.net/site/TR?company_id=1022&amp;fr_id=1341&amp;pg=company">Black</a>
  &nbsp;($80)
  <br />&nbsp;&nbsp;3&nbsp;-&nbsp;
  <a href="http://rcf.convio.net/site/TR?company_id=1026&amp;fr_id=1341&amp;pg=company">Green</a>
  &nbsp;($75)
  <br />&nbsp;&nbsp;4&nbsp;-&nbsp;
  <a href="http://rcf.convio.net/site/TR?company_id=1024&amp;fr_id=1341&amp;pg=company">Yellow</a>
  &nbsp;($68)
  <br />&nbsp;&nbsp;5&nbsp;-&nbsp;
  <a href="http://rcf.convio.net/site/TR?company_id=1020&amp;fr_id=1341&amp;pg=company">Blue</a>
  &nbsp;($55)
  <br />&nbsp;&nbsp;6&nbsp;-&nbsp;
  <a href="http://rcf.convio.net/site/TR?company_id=1027&amp;fr_id=1341&amp;pg=company">Red</a>
  &nbsp;($43)
  <br />&nbsp;&nbsp;7&nbsp;-&nbsp;
  <a href="http://rcf.convio.net/site/TR?company_id=1021&amp;fr_id=1341&amp;pg=company">Purple</a>
  &nbsp;($30)
  <br />&nbsp;&nbsp;8&nbsp;-&nbsp;
  <a href="http://rcf.convio.net/site/TR?company_id=1023&amp;fr_id=1341&amp;pg=company">Pink</a>
  &nbsp;($47,546.81)
  <br />
</div>

<小时/>

1. 主要是因为操作和重置 HTML(使用 jQuery 的 html() 或 native DOM 的 innerHTML )将取消设置分配给您正在操作的 HTML 内部节点的任何事件处理程序，并且将要么需要重新绑定(bind)，要么需要委托(delegate)事件处理(例如使用 on() )。

引用文献:

JavaScript:
• JavaScript Regular Expressions .
• Node.parentNode .
• Node.nextSibling .
• Node.nodeValue .
• Node.previousSibling .
• Node.removeChild() .
• String.prototype.replace() .
• jQuery:
  • each() .