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

时间：2014-10-20 16:04:01

标签： javascript jquery html regex dom

所以我目前正在使用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>

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

EDIT / UPDATE：

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

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

2 个答案:

答案 0 :(得分：2)

您可以将.replace()用于其他数字。

$(document).ready(function(){
    $('#wrapperBlock').html(function (i, oldHTML){
        return oldHTML.replace(/&nbsp;&nbsp;[0-9]&nbsp;-&nbsp;/g, '');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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 :(得分：2)

鉴于您只想保留<a>元素，据我所知，我建议避免使用正则表达式 1 ，并简单地说： 

// 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()或本机DOM的innerHTML）将取消设置分配给HTML内部节点的任何事件处理程序操纵，并且需要重新绑定，或者需要委托事件处理（例如，使用on()）。

    2. 参考文献：

相关问题
最新问题