Question

如果h1已在同一页面的另一个区域中使用，我正尝试从页面动态删除h1。例如，如果h1位于页面顶部的横幅中，则在同一页面下方的任何区域都不需要它。

    <div class="banner">
    <h1>Check to see if title here</h1>
    </div>

    <div id="rest_of_page">
    <h1>Remove this h1 if the above h1 exists already</h1>
    </div>

尝试过几件事，但他们似乎删除了两个h1标签，而不仅仅是顶部标签，如果顶部标签存在的话。可能有一些页面没有使用横幅，因此下面的h1需要保留。

Answer 1

您可以切换第二个横幅：

$(function() {
  $("#rest_of_page>h1").toggle(
    $(".banner>h1").length==0
  )
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="banner">
  <h1>Check to see if title here</h1>
</div>

<div id="rest_of_page">
  <h1>Remove this h1 if the above h1 exists already</h1>
</div>

或删除它

$(function() {
  if ($(".banner>h1").length>0) $("#rest_of_page>h1").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="banner">
  <h1>Check to see if title here</h1>
</div>

<div id="rest_of_page">
  <h1>Remove this h1 if the above h1 exists already</h1>
</div>

Answer 2

List<Guid>

Answer 3

这很容易。您必须使用.find()

查找元素

$(document).ready(function(){
    if($('.banner').find('h1').length > 0) {
        $('.rest_of_page').find('h1').remove();
    }
});

Answer 4

使用香草js的解决方案 - 首先使用querySelectAll获取所有h1，如果它超过1 h1，则迭代h1数组并移除evrey h1但第一个。

var h1 = document.querySelectorAll('h1');
if (h1.length > 1) {
    for (var i=1; i< h1.lenght; i++){
        h1[i].parentElement.removeChild(h1[i])
    }
}

Answer 5

首先检查jQuery对象$('.banner h1').length的长度，如果为true，则使用以下代码删除所有剩余的h1：

heading = $('.banner h1');

if(heading.length) {
  $('h1').not(heading).remove();
}

heading = $('.banner h1');

if(heading.length) {
  $('h1').not(heading).remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="banner">
  <h1>Check to see if title here</h1>
</div>

<div id="rest_of_page">
  <h1>Remove this h1 if the above h1 exists already</h1>
</div>
<h1>Remove this h1 if the above h1 exists already</h1>

Answer 6

一种方法是检索所有H1个节点并迭代它们，删除除第一个节点之外的所有节点。这是有效的，因为jQuery以文档顺序（也就是从上到下）返回匹配的元素。

$("h1").each(function(index, elem) {
  if (index > 0) {
    $(elem).remove();
  }
});

Answer 7

没有jQuery的解决方案

您可以使用document.getElementsByTagName('h1')按标记查询每个h1元素，然后使用remove删除第一个元素之后的每个元素。

var elems = document.getElementsByTagName('h1');
Object.keys(elems).forEach(function(key, i) {
  if (i > 0) {
    elems[key].remove();
  }
});

Answer 8

以下是一个jquery代码，如果您遇到上述情况，可以解决您的问题。

$("h1")[$("h1").length-1].remove();

要删除页面中除第一个以外的多个h1元素，您可以使用以下jquery代码。

 $("h1").each(function(e){
    if(e>0){         
        $(this).remove();
    }
 });

Answer 9

在jquery中使用.has()。如果你动态添加dom内容意味着你需要从dom元素的顶部遍历。

将匹配元素集减少到具有后代的元素集与选择器或DOM元素匹配。

$('.banner').has('h1').parents('body').find('h1:not(.banner h1)').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner">
    <h1>Check to see if title here</h1>
    </div>

    <div id="rest_of_page">
    <h1>Remove this h1 if the above h1 exists already</h1>
    </div>

Answer 10

$(function() {
  var cnt=0;
  $('h1').replaceWith(function(){
      if (cnt++)
        return $("<div>").append($(this).contents());
      else
        return $("<h1>").append($(this).contents());
  });
});

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

如果element包含h1，则从另一个元素中删除h1

10 个答案: