根据包含href标记上的单词的字符串，删除表中的所有图像

Question

我有一个flexigrid表 并且在其中有一些带图像的href链接

我有两种类型的hrefs

<a href="add/11111111111111111111112" class=" crud-action" title="ADD R"><img src="http://www.gmurgente.es/imagenes/portada/google+.png" alt="ADD R" /></a> 

和

<a href="remove" class=" crud-action" title="ADD R"><img src="http://www.gmurgente.es/imagenes/portada/google+.png" alt="ADD R" /></a>  

我想在href上删除所有图片，例如：<a href="remove"

我试过以下

＆＃13;

＆＃13;

$("#main-table-box").clone().find("img").remove();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="flexigrid" style='width: 100%;' data-unique-hash="cab9e34d6d41015d6dfa951860ce4bf2">
  <div id="hidden-operations" class="hidden-operations"></div>
  <div class="mDiv">
    <div class="ftitle">&nbsp;</div>
    <div title="" class="ptogtitle">	<span></span>

    </div>
  </div>
  <div id='main-table-box' class="main-table-box">
    <div class="tDiv">


    </div>
  </div>
  <div class='clear'></div>
</div>
<div id='ajax_list' class="ajax_list">
  <div class="bDiv">
    <table cellspacing="0" cellpadding="0" border="0" id="flex1">
      <thead>
        <tr class='hDiv'>
          <th width='40%'>
            <div class="text-left field-sorting " rel='number'>Number</div>
          </th>
          <th width='40%'>
            <div class="text-left field-sorting " rel='number_2'>Number2</div>
          </th>
          <th align="left" abbr="tools" axis="col1" class="" width='20%'>
            <div class="text-right">Actions</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td width='40%' class=''>
            <div class='text-left'>12111212</div>
          </td>
          <td width='40%' class=''>
            <div class='text-left'>2323232332</div>
          </td>
          <td align="left" width='20%'>
            <div class='tools'>
              <a href="add/2323232332" class=" crud-action" title="ADD R">
                <img src="http://www.gmurgente.es/imagenes/portada/google+.png" alt="ADD R" />
              </a>
              <div class='clear'></div>
            </div>
          </td>
        </tr>
        <tr class="erow">
          <td width='40%' class=''>
            <div class='text-left'>12234132141444334343</div>
          </td>
          <td width='40%' class=''>
            <div class='text-left'>&nbsp;</div>
          </td>
          <td align="left" width='20%'>
            <div class='tools'>

              <a href="remove" class=" crud-action" title="ADD R">
                <img src="http://www.gmurgente.es/imagenes/portada/google+.png" alt="ADD R" />
              </a>
              <div class='clear'></div>
            </div>
          </td>
        </tr>
        <tr>
          <td width='40%' class=''>
            <div class='text-left'>21111111116789979</div>
          </td>
          <td width='40%' class=''>
            <div class='text-left'>11111111111111111111112</div>
          </td>
          <td align="left" width='20%'>
            <div class='tools'>

              <a href="add/11111111111111111111112" class=" crud-action" title="ADD R">
                <img src="http://www.gmurgente.es/imagenes/portada/google+.png" alt="ADD R" />
              </a>
              <div class='clear'></div>
            </div>
          </td>
        </tr>
        <tr class="erow">
          <td width='40%' class=''>
            <div class='text-left'>834845734</div>
          </td>
          <td width='40%' class=''>
            <div class='text-left'>834845734</div>
          </td>
          <td align="left" width='20%'>
            <div class='tools'>

              <a href="add/834845734" class=" crud-action" title="ADD R">
                <img src="http://www.gmurgente.es/imagenes/portada/google+.png" alt="ADD R" />
              </a>
              <div class='clear'></div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如何获得结果？

Answer 1

您可以通过选择元素并使用.remove() jQuery函数（docs）来删除元素。

类似下面的代码，我选择了href属性的内容：

$('a[href="remove"]').remove()

---

编辑：查看代码段，完美运行

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="flexigrid" style='width: 100%;' data-unique-hash="cab9e34d6d41015d6dfa951860ce4bf2">
  <div id="hidden-operations" class="hidden-operations"></div>
  <div class="mDiv">
    <div class="ftitle">&nbsp;</div>
    <div title="" class="ptogtitle">	<span></span>

    </div>
  </div>
  <div id='main-table-box' class="main-table-box">
    <div class="tDiv">


    </div>
  </div>
  <div class='clear'></div>
</div>
<div id='ajax_list' class="ajax_list">
  <div class="bDiv">
    <table cellspacing="0" cellpadding="0" border="0" id="flex1">
      <thead>
        <tr class='hDiv'>
          <th width='40%'>
            <div class="text-left field-sorting " rel='number'>Number</div>
          </th>
          <th width='40%'>
            <div class="text-left field-sorting " rel='number_2'>Number2</div>
          </th>
          <th align="left" abbr="tools" axis="col1" class="" width='20%'>
            <div class="text-right">Actions</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td width='40%' class=''>
            <div class='text-left'>12111212</div>
          </td>
          <td width='40%' class=''>
            <div class='text-left'>2323232332</div>
          </td>
          <td align="left" width='20%'>
            <div class='tools'>
              <a href="add/2323232332" class=" crud-action" title="ADD R">
                <img src="http://www.gmurgente.es/imagenes/portada/google+.png" alt="ADD R" />
              </a>
              <div class='clear'></div>
            </div>
          </td>
        </tr>
        <tr class="erow">
          <td width='40%' class=''>
            <div class='text-left'>12234132141444334343</div>
          </td>
          <td width='40%' class=''>
            <div class='text-left'>&nbsp;</div>
          </td>
          <td align="left" width='20%'>
            <div class='tools'>

              <a href="remove" class=" crud-action" title="ADD R">
                <img src="http://www.gmurgente.es/imagenes/portada/google+.png" alt="ADD R" />
              </a>
              <div class='clear'></div>
            </div>
          </td>
        </tr>
        <tr>
          <td width='40%' class=''>
            <div class='text-left'>21111111116789979</div>
          </td>
          <td width='40%' class=''>
            <div class='text-left'>11111111111111111111112</div>
          </td>
          <td align="left" width='20%'>
            <div class='tools'>

              <a href="add/11111111111111111111112" class=" crud-action" title="ADD R">
                <img src="http://www.gmurgente.es/imagenes/portada/google+.png" alt="ADD R" />
              </a>
              <div class='clear'></div>
            </div>
          </td>
        </tr>
        <tr class="erow">
          <td width='40%' class=''>
            <div class='text-left'>834845734</div>
          </td>
          <td width='40%' class=''>
            <div class='text-left'>834845734</div>
          </td>
          <td align="left" width='20%'>
            <div class='tools'>

              <a href="add/834845734" class=" crud-action" title="ADD R">
                <img src="http://www.gmurgente.es/imagenes/portada/google+.png" alt="ADD R" />
              </a>
              <div class='clear'></div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<script>$(function () { $('a[href="remove"]').remove(); } ); </script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

优雅的ECMAScript 5解决方案将是以下三个线程：

＆＃13;

＆＃13;

[].slice.call(flex1.getElementsByTagName("a"), 0).
   filter(function(a) { return a.getAttribute("href") == "remove" }).
   forEach(function(a) { a.removeChild(a.children[0]) });

＆＃13;

<div class="flexigrid" style='width: 100%;' data-unique-hash="cab9e34d6d41015d6dfa951860ce4bf2">
  <div id="hidden-operations" class="hidden-operations"></div>
  <div class="mDiv">
    <div class="ftitle">&nbsp;</div>
    <div title="" class="ptogtitle">	<span></span>

    </div>
  </div>
  <div id='main-table-box' class="main-table-box">
    <div class="tDiv">


    </div>
  </div>
  <div class='clear'></div>
</div>
<div id='ajax_list' class="ajax_list">
  <div class="bDiv">
    <table cellspacing="0" cellpadding="0" border="0" id="flex1">
      <thead>
        <tr class='hDiv'>
          <th width='40%'>
            <div class="text-left field-sorting " rel='number'>Number</div>
          </th>
          <th width='40%'>
            <div class="text-left field-sorting " rel='number_2'>Number2</div>
          </th>
          <th align="left" abbr="tools" axis="col1" class="" width='20%'>
            <div class="text-right">Actions</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td width='40%' class=''>
            <div class='text-left'>12111212</div>
          </td>
          <td width='40%' class=''>
            <div class='text-left'>2323232332</div>
          </td>
          <td align="left" width='20%'>
            <div class='tools'>
              <a href="add/2323232332" class=" crud-action" title="ADD R">
                <img src="http://www.gmurgente.es/imagenes/portada/google+.png" alt="ADD R" />
              </a>
              <div class='clear'></div>
            </div>
          </td>
        </tr>
        <tr class="erow">
          <td width='40%' class=''>
            <div class='text-left'>12234132141444334343</div>
          </td>
          <td width='40%' class=''>
            <div class='text-left'>&nbsp;</div>
          </td>
          <td align="left" width='20%'>
            <div class='tools'>

              <a href="remove" class=" crud-action" title="ADD R">
                <img src="http://www.gmurgente.es/imagenes/portada/google+.png" alt="ADD R" />
              </a>
              <div class='clear'></div>
            </div>
          </td>
        </tr>
        <tr>
          <td width='40%' class=''>
            <div class='text-left'>21111111116789979</div>
          </td>
          <td width='40%' class=''>
            <div class='text-left'>11111111111111111111112</div>
          </td>
          <td align="left" width='20%'>
            <div class='tools'>

              <a href="add/11111111111111111111112" class=" crud-action" title="ADD R">
                <img src="http://www.gmurgente.es/imagenes/portada/google+.png" alt="ADD R" />
              </a>
              <div class='clear'></div>
            </div>
          </td>
        </tr>
        <tr class="erow">
          <td width='40%' class=''>
            <div class='text-left'>834845734</div>
          </td>
          <td width='40%' class=''>
            <div class='text-left'>834845734</div>
          </td>
          <td align="left" width='20%'>
            <div class='tools'>

              <a href="add/834845734" class=" crud-action" title="ADD R">
                <img src="http://www.gmurgente.es/imagenes/portada/google+.png" alt="ADD R" />
              </a>
              <div class='clear'></div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

请确保包含an ECMAScript 5 polyfill以向ECMAScript 3-only browsers添加向后兼容性，如果这对您很重要。

Answer 3

这将使用普通的javascript：

---

var table = document.getElementById('flex1');
var a = table.getElementsByTagName('a');console.log(a);
for (var i= 0;i<a.length;i++) {
    var b = a[i].getAttribute('href');
    if (b == 'remove')
    {

           
var row = a[i].parentNode.parentNode.parentNode;  
row.deleteCell(2);

    }}
    }}

<div class="flexigrid" style='width: 100%;' data-unique-hash="cab9e34d6d41015d6dfa951860ce4bf2">
  <div id="hidden-operations" class="hidden-operations"></div>
  <div class="mDiv">
    <div class="ftitle">&nbsp;</div>
    <div title="" class="ptogtitle">	<span></span>

    </div>
  </div>
  <div id='main-table-box' class="main-table-box">
    <div class="tDiv">


    </div>
  </div>
  <div class='clear'></div>
</div>
<div id='ajax_list' class="ajax_list">
  <div class="bDiv">
    <table cellspacing="0" cellpadding="0" border="0" id="flex1">
      <thead>
        <tr class='hDiv'>
          <th width='40%'>
            <div class="text-left field-sorting " rel='number'>Number</div>
          </th>
          <th width='40%'>
            <div class="text-left field-sorting " rel='number_2'>Number2</div>
          </th>
          <th align="left" abbr="tools" axis="col1" class="" width='20%'>
            <div class="text-right">Actions</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td width='40%' class=''>
            <div class='text-left'>12111212</div>
          </td>
          <td width='40%' class=''>
            <div class='text-left'>2323232332</div>
          </td>
          <td align="left" width='20%'>
            <div class='tools'>
              <a href="add/2323232332" class=" crud-action" title="ADD R">
                <img src="http://www.gmurgente.es/imagenes/portada/google+.png" alt="ADD R" />
              </a>
              <div class='clear'></div>
            </div>
          </td>
        </tr>
        <tr class="erow">
          <td width='40%' class=''>
            <div class='text-left'>12234132141444334343</div>
          </td>
          <td width='40%' class=''>
            <div class='text-left'>&nbsp;</div>
          </td>
          <td align="left" width='20%'>
            <div class='tools'>

              <a href="remove" class=" crud-action" title="ADD R">
                <img src="http://www.gmurgente.es/imagenes/portada/google+.png" alt="ADD R" />
              </a>
              <div class='clear'></div>
            </div>
          </td>
        </tr>
        <tr>
          <td width='40%' class=''>
            <div class='text-left'>21111111116789979</div>
          </td>
          <td width='40%' class=''>
            <div class='text-left'>11111111111111111111112</div>
          </td>
          <td align="left" width='20%'>
            <div class='tools'>

              <a href="add/11111111111111111111112" class=" crud-action" title="ADD R">
                <img src="http://www.gmurgente.es/imagenes/portada/google+.png" alt="ADD R" />
              </a>
              <div class='clear'></div>
            </div>
          </td>
        </tr>
        <tr class="erow">
          <td width='40%' class=''>
            <div class='text-left'>834845734</div>
          </td>
          <td width='40%' class=''>
            <div class='text-left'>834845734</div>
          </td>
          <td align="left" width='20%'>
            <div class='tools'>

              <a href="add/834845734" class=" crud-action" title="ADD R">
                <img src="http://www.gmurgente.es/imagenes/portada/google+.png" alt="ADD R" />
              </a>
              <div class='clear'></div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>