Question

我需要选择"display: none"并赋予其中所有articles类为span的所有.span-target。在这里，我将为您提供示例。

我尝试使用remove = document.querySelectorAll('');，但是我只能选择它们，却不知道如何添加它们display: none或以某种方式删除它们。

请注意，jQuery不是一种选择

谢谢你。

此处的示例：

<article class="class-1">
  <div class="class-2">
    <span class="class-3">Example 1</span>
    <div class="class-4 class-41 class-42">
      <div class="class-5 class-51 class-52">
        <div class="class-6 class-61 class-62 class-63">
          <div class="class-7 class-71 class-72 class-73">
            <div class="class-8 class-81 class-82 class-83">
              <span class="span-1">
                <time class="span-2">Sep 26</time>
                <span class="span-3"></span>
                <span class="span-4"></span>
                <span class="span-target">
                  Please leave
                  <span class="span-5">
                  </span>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

Answer 1

您可以遍历所选元素并为其添加样式

Array.from(
  document.querySelectorAll('article')
).forEach(el => {
    let shouldHide = el.querySelectorAll('.span-target').length;
    if (shouldHide) {
        el.style.display = "none";
    }
});

Answer 2

请尝试以下代码段。

var remove = document.querySelectorAll('*[class^="span-"]');

for (var i = 0; i < remove.length; ++i) {
   remove[i].classList.add('hide');
}

.hide {
   display: none;
}

<article class="class-1">
    <div class="class-2">
        <span class="class-3">Example 1</span>

        <div class="class-4 class-41 class-42">
            <div class="class-5 class-51 class-52">
                <div class="class-6 class-61 class-62 class-63">
                    <div class="class-7 class-71 class-72 class-73">

                        <div class="class-8 class-81 class-82 class-83">
                            <span class="span-1">
                            <time class="span-2">Sep 26</time>
                            <span class="span-3"></span>
                            <span class="span-4"></span>
                            <span class="span-target">Please leave
                            <span class="span-5">
                            </span></span></span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

Answer 3

您只需要遍历元素列表并更新其css属性：-

获取元素：

var elements = document.getElementsByClassName("span-target");

循环

for (let ele of elements) {

更新其CSS属性

  ele.style.display = "none";

这是工作代码：

var elements = document.getElementsByClassName("span-target");
for (let ele of elements) {
  ele.style.display = "none";
}

<article class="class-1">
    <div class="class-2">
        <span class="class-3">Example 1</span>

        <div class="class-4 class-41 class-42">
            <div class="class-5 class-51 class-52">
                <div class="class-6 class-61 class-62 class-63">
                    <div class="class-7 class-71 class-72 class-73">

                        <div class="class-8 class-81 class-82 class-83">
                            <span class="span-1">
                            <time class="span-2">Sep 26</time>
                            <span class="span-3"></span>
                            <span class="span-4"></span>
                            <span class="span-target">Please leave
                            <span class="span-5">
                            </span></span></span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

Answer 4

此功能应满足您的要求。如果要删除文章，可以执行articles[i].remove()代替设置display:none

function hideUnwantedArticles() {
  var articles = document.getElementsByClassName('class-1');
  for(var i = 0; i < articles.length; i++) {
    var spans = articles[i].getElementsByClassName('span-target');
    if(spans.length > 0) articles[i].style = 'display:none;';
  }
}

hideUnwantedArticles();

<article class="class-1">
    <div class="class-2">
        <span class="class-3">Example 1</span>

        <div class="class-4 class-41 class-42">
            <div class="class-5 class-51 class-52">
                <div class="class-6 class-61 class-62 class-63">
                    <div class="class-7 class-71 class-72 class-73">

                        <div class="class-8 class-81 class-82 class-83">
                            <span class="span-1">
                            <time class="span-2">Sep 26</time>
                            <span class="span-3"></span>
                            <span class="span-4"></span>
                            <span class="span-target">Please leave
                            <span class="span-5">
                            </span></span></span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

<article class="class-1">
    <div class="class-2">
        <span class="class-3">Example 1</span>

        <div class="class-4 class-41 class-42">
            <div class="class-5 class-51 class-52">
                <div class="class-6 class-61 class-62 class-63">
                    <div class="class-7 class-71 class-72 class-73">

                        <div class="class-8 class-81 class-82 class-83">
                            <span class="span-1">
                            <time class="span-2">Sep 27</time>
                            <span class="span-3"></span>
                            <span class="span-4"></span>
                            <span class="span-5">
                            </span></span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

Answer 5

var ele = document.querySelectorAll('article span.span-target');
for(var i=0;i<ele.length;i++){
  ele[i].style.display="none"
}

<article class="class-1">
    <div class="class-2">
        <span class="class-3">Example 1</span>

        <div class="class-4 class-41 class-42">
            <div class="class-5 class-51 class-52">
                <div class="class-6 class-61 class-62 class-63">
                    <div class="class-7 class-71 class-72 class-73">

                        <div class="class-8 class-81 class-82 class-83">
                            <span class="span-1">
                            <time class="span-2">Sep 26</time>
                            <span class="span-3"></span>
                            <span class="span-4"></span>
                            <span class="span-target">Please leave
                            <span class="span-5">
                            </span></span></span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

选择具有特定子元素（范围）的所有div并设置其样式

5 个答案: