javascript - 当 包含特定字符或单个字符时隐藏 和

Question

我有 HTML 显示用户对私有(private)用户配置文件页面上表单中的字段的响应。表单上的字段是有条件的，因此其中许多字段永远不会呈现给用户。 HTML 由系统输出，从未呈现给用户的下拉字段会收到“—”(破折号？)作为值，而他们未选中的复选框会收到“否”。

系统缺少识别和隐藏这些字段的功能，因此我必须使用 CSS 或 JS/JQ 来完成。准备好文档后，我需要隐藏具有“—”值的 DD 和关联的父 DT。我还想通过显示为“否”的复选框来执行此操作，但破折号更为重要。

我在尝试调整类似帖子中提供的解决方案时没有取得任何成功。感谢您提供任何建议和专业知识!

 <dl class="request-details">
      <dt>Test Account submitted this request</dt>
               
                <dt>Status</dt>
                <dd>
                   <span class="request-status request-open" title="We are working on a response for you">
                   Open
                   </span>
                </dd>
            
                <dt>Name</dt>
                <dd>
                   <span>Wayne Gretzky</span>
                </dd>
                
                <dt>Order Number</dt>
                <dd>
                   <span>—</span>
                </dd>
                
                <dt>Brand</dt>
                <dd>
                   <span>Brand XYZ</span>
                </dd>
                
                <dt>Check the box if you are trying to retrieve links or registration information.</dt>
                <dd>
                   <span>No</span>
                </dd>
                
                <dt>Check the box if you can access the email address your software is registered to.</dt>
                <dd>
                   <span>No</span>
                </dd>
                
                <dt>SS Product Type</dt>
                <dd>
                   <span>Plus</span>
                </dd>
                
                <dt>SN Product Type</dt>
                <dd>
                   <span>—</span>
                </dd>
                
                <dt>SNE Product Type</dt>
                <dd>
                   <span>—</span>
                </dd>
                
                <dt>TLE Product Type</dt>
                <dd>
                   <span>—</span>
                </dd>

Answer 1

你可以遍历spans，如果它们的任何内容是—，那么隐藏父级dd和之前的dt

$('span').each(function() {
  if ($(this).text() == '—') {
    $(this).parent('dd').addClass('hidden').prev('dt').addClass('hidden');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style>
  .hidden {
    display: none;
  }
</style>

<dl class="request-details">
  <dt>Test Account submitted this request</dt>

  <dt>Status</dt>
  <dd>
    <span class="request-status request-open" title="We are working on a response for you">
                   Open
                   </span>
  </dd>

  <dt>Name</dt>
  <dd>
    <span>Wayne Gretzky</span>
  </dd>

  <dt>Order Number</dt>
  <dd>
    <span>—</span>
  </dd>

  <dt>Brand</dt>
  <dd>
    <span>Brand XYZ</span>
  </dd>

  <dt>Check the box if you are trying to retrieve links or registration information.</dt>
  <dd>
    <span>No</span>
  </dd>

  <dt>Check the box if you can access the email address your software is registered to.</dt>
  <dd>
    <span>No</span>
  </dd>

  <dt>SS Product Type</dt>
  <dd>
    <span>Plus</span>
  </dd>

  <dt>SN Product Type (hide)</dt>
  <dd>
    <span>—</span>
  </dd>

  <dt>SNE Product Type</dt>
  <dd>
    <span>—</span>
  </dd>

  <dt>TLE Product Type</dt>
  <dd>
    <span>—</span>
  </dd>