admin管理员组

文章数量:1291009

I want to remove next element using jquery here is my code please check it.

  <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/>

Here is a jquery code but this is not working.

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

I want to remove <br/> which is after the t2.

I want to remove next element using jquery here is my code please check it.

  <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/>

Here is a jquery code but this is not working.

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

I want to remove <br/> which is after the t2.

Share Improve this question asked Sep 3, 2016 at 6:35 Azeem HaiderAzeem Haider 1,5134 gold badges24 silver badges44 bronze badges 5
  • $('br').next('br').remove(); use this code – aswathy Commented Sep 3, 2016 at 6:44
  • Your code should work as written. What problem are you having? – Barmar Commented Sep 3, 2016 at 6:51
  • Your format of ment in html is incorrect. The <br/> of your ment is forcing the third span to go to next line. For reference you can see my answer below. – Sidharth Gusain Commented Sep 3, 2016 at 6:52
  • 1 Your code works for me: jsfiddle/barmar/fftek2rf – Barmar Commented Sep 3, 2016 at 6:55
  • There is no problem with your code, It seems to be working. – Mohit Tanwani Commented Sep 3, 2016 at 9:42
Add a ment  | 

5 Answers 5

Reset to default 3

Try this :

$(document).ready(function(){

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

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

    })
})

Final code :

<!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./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>

$("#t2").next("br").remove();
<script src="https://ajax.googleapis./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/>

This might help you.

Your jquery code is working fine but the main problem was your ment in the html code

// I want to remove this <br/>

It should be

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

using nextAll method allows us to search through the successors of these elements in the DOM tree

if one ahead br element

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

if not

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

You need to bind your jQuery code to some sort of event, like https://jsfiddle/ps2aoey7/

Also, in this case you don't need the next() function.

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 option 1 (click event)

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

jQuery option 2 (on page load)

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

Maybe your code is working. Because there is nothing wrong in the code. It should work.

Maybe your CSS is the actual problem.

If your css is set to display <span> in the next line (display block or anything else) it will not show code's effect. Though it's just an assumption but it's better to check that out.

And as @Dev and @Sidharth said it's better to keep a selector in the next().

本文标签: javascriptRemove next element in jqueryStack Overflow