Question

我有一个网站，表格中有很多按钮，如果在页面的任何地方找到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>

Answer 1

这会做你要求的......

＆＃13;

var searchStrings = [string1, string2, string3, string4];
var bodyText = document.querySelector("body").innerText;

searchString.forEach(function(word) {
  if (bodyText.indexOf(word) != -1) {
    $("td .btn").remove();
    return;
  }
});

＆＃13;

但是，这是以条件方式删除按钮的不好方法。有些事情是将条件文本放到页面上，并且某些东西也应该负责隐藏或删除（或不创建）按钮。

Answer 2

使用功能样式的另一种方法：

// 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'
});

＆＃13;

function removeIfStringsPresent(opts) {
  let settings = {};

  Object.keys(opts || {}).forEach(
    key => settings[key] = opts[key]
  );

  let parents = Array.from(
      document.querySelectorAll(settings.ancestorSelector)
    ),
    texts = parents.map(
      parent => parent.textContent
    );

  settings.needles.forEach(
    needle => {
      if (texts.some(
          text => text.indexOf(needle) > -1
        )) {
        Array.from(document.querySelectorAll(settings.targetSelector))
          .forEach(
            target => {
              if (target) {
                target.parentNode.removeChild(target);
              }
            }
          );
      }
    }
  )
}

removeIfStringsPresent({
  'needles': ['Ben'],
  'targetSelector': '.panel-body .btn',
  'ancestorSelector': 'body'
});

＆＃13;

<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>

＆＃13;

JS Fiddle demo

参考文献：

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

2 个答案: