Javascript 仅当字符串匹配时才从表中删除按钮

我有一个网站，在一个表中有许多按钮，我需要删除表中的按钮。如果在页面上的任何位置找到4个文本字符串（string1 string2 string3 string4）中的任何一个，我知道我可以使用

$（“td.btn”）。remove（）

删除按钮，但我不确定如何制作字符串以匹配当前页面其他位置的4个字符串中的任何一个

<div class="panel-body">
  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th colspan="2">game1</th>
        <th colspan="2">game 2</th>
        <th colspan="2">game 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ben</td>
        <td class="info">
          46%
        </td>
        <td><a href="?" class="btn btn-info">
               Rate
           </a> <a href="?" class="btn btn-success" style="display: none;">
               Review
           </a></td>
        <td class="">
          0%
        </td>
        <td><a href="?" class="btn btn-info">
               Rate
           </a> <a href="?" class="btn btn-success" style="display: none;">
               Review
           </a></td>
        <td class="">
          0%
        </td>
        <td><a href="?" class="btn btn-info">
               Rate
           </a> <a href="?" class="btn btn-success" style="display: none;">
               Review
           </a></td>
        <td class="success" style="display: none;">
          <p>Yes</p>
        </td>
        <td class="" style="display: none;">
          <p>No</p>
        </td>
        <td style="display: none;">
          <p></p>
        </td>
      </tr>
      <tr>
        <td>John</td>
        <td class="info">
          9%
        </td>
        <td><a href="?" class="btn btn-info">
               Rate
           </a> <a href="?" style="display: none;">
               Review
           </a></td>
        <td class="">
          0%
        </td>
        <td><a href="?">
               Rate
           </a> <a href="?" class="btn btn-success" style="display: none;">
               Review
           </a></td>
        <td class="">
          0%
        </td>
        <td><a href="?" class="btn btn-info">
               Rate
           </a> <a href="?" class="btn btn-success" style="display: none;">
               Review
           </a></td>
        <td class="success" style="display: none;">
          <p>Yes</p>
        </td>
        <td class="" style="display: none;">
          <p>No</p>
        </td>
        <td style="display: none;">
          <p></p>
        </td>
      </tr>
      <tr>
        <td>James</td>
        <td class="success">
          100%
        </td>
        <td><a href="?" class="btn btn-info">
               Rate
           </a> <a href="?" class="btn btn-success" style="display: none;">
               Review
           </a></td>
        <td class="info">
          0%
        </td>
        <td><a href="?" class="btn btn-info">
               Rate
           </a> <a href="?" class="btn btn-success" style="display: none;">
               Review
           </a></td>
        <td class="">
          0%
        </td>
        <td><a href="?" class="btn btn-info">
               Rate
           </a> <a href="?" class="btn btn-success" style="display: none;">
               Review
           </a></td>
        <td class="success" style="display: none;">
          <p>Yes</p>
        </td>
        <td class="" style="display: none;">
          <p>No</p>
        </td>
        <td style="display: none;">
          <p></p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

名称
游戏1
游戏2
第三场
本
46%
0%
0%
对

没有


约翰
9%
0%
0%
对

没有


詹姆斯
100%
0%
0%
对

没有

这将满足您的要求

var searchStrings=[string1、string2、string3、string4]；
var bodyText=document.querySelector（“body”）.innerText；
searchString.forEach（函数（word）{
if（bodyText.indexOf（word）！=-1）{
$（“td.btn”）.remove（）；
返回；
}
});使用功能样式的另一种方法：

// creating a named function that takes user-defined
// (in this case developer-defined) options:
function removeIfStringsPresent(opts) {

  // initialising an empty object to obtain and store
  // the passed-in variables (this isn't entirely
  // necessary in this context, but does allow you
  // to set defaults to allow the user/developer
  // to set fewer variables or simply hardcode the
  // default settings in the function):
  let settings = {};

  // using Object.keys() to retrieve the user-defined
  // settings from the opts Object, we supply an empty
  // Object to avoid errors being generated by the
  // omission of an opts Object (in the event that
  // the user/developer wants to simply use predefined
  // defaults or hardcoded values):
  Object.keys(opts || {}).forEach(

    // 'key' is a reference to current array-element
    // of the Array of Object keys over which we're
    // iterating; here we assign the value held in
    // the current key of the opts Object to the
    // same key of the settings Object:
    key => settings[key] = opts[key]
  );

  // we convert the NodeList returned from
  // document.querySelectorAll() into an Array, using
  // Array.from():
  let parents = Array.from(
      document.querySelectorAll(settings.ancestorSelector)
    ),

  // we iterate over the parents Array, using
  // Array.prototype.map(), to obtain the text of (each of
  // the) parent/ancestor Node(s) within which you wish
  // to search:
    texts = parents.map(

      // returning the textContent of the current 'parent'
      // element of the Array of parent element(s) over
      // which we're iterating in order to create a new
      // Array:
      parent => parent.textContent
    );

  // here we iterate over the Array of 'needles' we're looking
  // for (the metaphor was intended to be 'needles' and 'haystacks'
  // but I forgot while I was writing the code, and didn't want to
  // rewrite for fear of introducing a silly error):
  settings.needles.forEach(

    // another Arrow function, here 'needle' refers to the current
    // String of the Array of Strings over which we're iterating;
    // because this Arrow function contains multiple statements
    // it's been enclosed in a block scope, using the curly braces:
    needle => {

      // if any of the elements of the texts Array (an Array of the
      // each 'parent' elements' text) contains the needle (and
      // therefore the index of that needle is greater than -1):
      if (texts.some(
          text => text.indexOf(needle) > -1
        )) {

        // we iterate over the NodeList returned from
        // document.querySelectorAll(), using the user-supplied
        // settings.targetSelector CSS selector, once it's converted
        // to an Array, using Array.from():
        Array.from(document.querySelectorAll(settings.targetSelector))
          .forEach(

            // 'target' is the current node of the Array of nodes
            // that we wish to remove from the document:
            target => {

              // if the target exists:
              if (target) {

                // we use parentNode.removeChild() to remove
                // that target:
                target.parentNode.removeChild(target);
              }
            }
          );
      }
    }
  )
}

// calling the function:
removeIfStringsPresent({

  // needles: Array of Strings, the strings you wish to search for:
  'needles': ['Ben'],

  // targetSelector: String, CSS selector identifying which
  // target(s) you wish to remove:
  'targetSelector': '.panel-body .btn',

  // ancestorSelector: String, CSS selector to identify the
  // the ancestor(s) within which you wish to search for the
  // supplied needle(s):
  'ancestorSelector': 'body'
});


函数removeIfStringsPresent（选项）{
让设置={}；
Object.keys（opts |{}）.forEach(
key=>settings[key]=opts[key]
);
让parents=Array.from(
document.queryselectoral（settings.antestorselector）
),
text=parents.map(
parent=>parent.textContent
);
设置。针。forEach(
针=>{
如果有的话(
text=>text.indexOf（指针）>-1
)) {
Array.from（document.querySelectorAll（settings.targetSelector））
弗雷奇先生(
目标=>{
如果（目标）{
target.parentNode.removeChild（目标）；
}
}
);
}
}
)
}
移除现有的字符串({
“针”：[“本”]，
'targetSelector'：'.panel body.btn'，
'ancestorSelector'：'body'
});

名称
游戏1
游戏2
第三场
本
46%
0%
0%
对

没有


约翰
9%
0%
0%
对

没有


詹姆斯
100%
0%
0%
对

没有


那么，是否存在一个字符串可能会限制搜索的地方？就像你有10个干草堆一样，你能把它限制为一个来搜索针吗？页面是如何构建的？向标记中添加元素，然后在页面上有特定内容时将其删除，这听起来是解决问题的糟糕方法。你能解释一下为什么你需要这样做，这样我们可以告诉你一个更好的方法吗？我们有一个fullstack开发人员，他为一个流行的CMS创建了一个插件，除了基本的html和python之外，我不是一个程序员，没有添加所需更改的技能。我想学习解决这个问题的正确方法，我知道这只是一个快速的解决方法，至少在我有足够的时间更好地理解他创建插件的方式并实现更好的解决方法之前。这很公平-感谢您的回答，这很有意义（在这种情况下尽可能多）。这不是一个完美的世界-我们有时不得不做这些事情！如果你能缩小文本可能出现的位置（对于一个或多个特定的父元素），至少会更好，但如果不是这样，那么现在就有一个可行的解决方案，保存可能的文本字符串的元素是string1。我唯一要更改的是将forEach转换为普通for循环，以便在找到匹配项后可以完全退出该功能。使用forEach，即使您在第一个单词上找到匹配项，它也会为每个单词运行。@Tyler-同意，但在这种情况下，我真的不在乎性能。我宁愿正确处理这个问题，也不愿担心字符串搜索4次而不是一次。嗨，我尝试过这种方法，但似乎不起作用。@Aaran有件事你没有告诉我们。请编辑问题并提供一个Hi，刚刚测试过，它看起来不错，但是John game 2的rate按钮出于某种原因保留了下来。这是因为它没有与您要删除的其他元素相同的
.btn
类，这是因为我没有更改您的HTML。