如何删除某个元素之后的第一个

时间:2016-12-23 13:24:40

标签: javascript jquery

我想删除<br/>元素之后的所有第一个<h1>

我有以下HTML:

<div id="myDiv">
  <h1>Test</h1>
  <br> <!-- <- remove this -->
  Lorem ipsum dolor sit amet
  <br>
  <br>

  <h1>Test</h1>
  <br> <!-- <- remove this -->
  Lorem ipsum dolor sit amet
  <br>
  <br>
</div>

我写了这段代码,但它没有删除第一个br。

$('#myDiv h1').each(function() {        
    $(this).closest("br").remove();
});

6 个答案:

答案 0 :(得分:4)

您可以使用jQuery next()方法执行以下操作。

 $('#myDiv h1').next('br').remove()

答案 1 :(得分:2)

$('#myDiv h1').each(function(){
    $(this).next('br').remove()
});

答案 2 :(得分:1)

可以像查询<br/>容器中<h1/>标记之后的#myDiv标记一样简单:

$('#myDiv h1 + br').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
  <h1>Test</h1>
  <br> <!-- <- remove this -->
  Lorem ipsum dolor sit amet
  <br>
  <br>

  <h1>Test</h1>
  <br> <!-- <- remove this -->
  Lorem ipsum dolor sit amet
  <br>
  <br>
</div>

答案 3 :(得分:1)

对于想要一个vanilla JavaScript解决方案的未来读者。此外,我不确定其他海报解决方案是否会删除<br>下的<h1>,如果没有在{1}下找到。{/ p>

var eles = document.querySelectorAll('#myDiv h1');
for (var i = 0; i < eles.length; i++) {
  var a = eles[i];
  while (a.nextElementSibling) {
    a = a.nextElementSibling;
    if (a.localName) {
      if(a.localName == 'br') {
        a.parentElement.removeChild(a);
        break;
      }
      else if(a.localName == 'h1')
        break;
    }
  }
}

编辑:我不知道为什么我使用localName .... tagName可能更好。

答案 4 :(得分:0)

您定位的是h3元素,HTML文档中没有这些元素。

将您的选择器更改为定位h1元素。

$('#myDiv h1')
//        ^^

编辑:您似乎已将问题更新为定位h1元素。

答案 5 :(得分:0)

使用Next Adjacent Selector (“prev + next”),您可以写:

$('#myDiv h1 + br').remove();

&#13;
&#13;
console.log('BR : ' + $('#myDiv br').length + '  H1 + BR:' +  $('#myDiv h1 + br').length);
$('#myDiv h1 + br').remove();
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="myDiv">
  <h1>Test</h1>
  <br> <!-- <- remove this -->
  Lorem ipsum dolor sit amet
  <br>
  <br>

  <h1>Test</h1>
  <br> <!-- <- remove this -->
  Lorem ipsum dolor sit amet
  <br>
  <br>
</div>
&#13;
&#13;
&#13;