Question

我想使用jquery删除下一个元素这里是我的代码请检查它。

  <span id="t1">Test 1</span><br/>
  <span id="t2">Test 2</span><br/> // I want to remove this <br/>
  <span id="t3">Test 3</span><br/>

这是一个jquery代码，但这不起作用。

   $('#t2').next().remove();

我想删除<br/>之后的t2。

Answer 1

$("#t2").next("br").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="t1">Test 1</span><br/>
<span id="t2">Test 2</span><br/> 
<span id="t3">Test 3</span><br/>

这可能会对你有帮助。

你的jquery代码工作正常，但主要问题是html代码中的comment

// I want to remove this <br/>

应该是

<!-- I want to remove this <br/> -->

Answer 2

您需要将jQuery代码绑定到某种事件，例如 https://jsfiddle.net/ps2aoey7/

此外，在这种情况下，您不需要next（）函数。

HTML

  <span id="t1">Test 1</span><br/>
  <span id="t2">Test 2<br/> // I want to remove this <br/></span>
  <span id="t3">Test 3</span><br/>

jQuery选项1（点击事件）

$( "#t2" ).click(function() {
  $('#t2').remove();
});

jQuery选项2（在页面加载时）

$( document ).ready(function() {
  $('#t2').remove();
});

Answer 3

使用nextAll方法允许我们在DOM树中搜索这些元素的后继者

如果有一个提前的br元素

$('#t2').next('br').remove();

如果不是

$('#t2').nextAll('br').remove();

Answer 4

也许您的代码正在运行。因为代码中没有任何错误。它应该工作。

也许你的CSS是实际问题。

如果您的css设置为在下一行显示<span>（显示块或其他任何内容），则不会显示代码的效果。虽然这只是一个假设，但最好还是检查一下。

正如@Dev和@Sidharth所说，最好将选择器保留在下一个（）中。

Answer 5

试试这个：

$(document).ready(function(){

    $("button").on("click",function(){

        $("#t2").next().remove("br");

    })
})

最终代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    
    
    <span id="t1">Test 1</span><br/>
    <span id="t2">Test 2</span> <!--I want to remove this--><br>
    <span id="t3">Test 3</span>
    <br><br>
    <button>Remove</button>
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    
    <script>
        
    $(document).ready(function(){

        $("button").on("click",function(){

            $("#t2").next().remove("br");

        })
    })
    </script>
     
    </body>
</html>

删除jquery中的下一个元素

5 个答案: