Jquery remove element is a way to remove an element from DOM.
Jquery remove element on button click
The remove() is very useful to remove the elements
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h2>Example of Jquery Remove()</h2> <p>Remove this line</p> <button>Remove Paragraph</button> <script> $( "button" ).click(function() { $( "p" ).remove(); }); </script> </body> </html> |
How to remove Jquery element by class
To remove any class in html remove() is used.
In following example class two is removed on button click event.
Example remove html element
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h2>Example of Jquery remove() by class</h2> <p class="one">This is class one</p> <p class="two">This is class two (Remove this)</p> <p class="three">This is class three</p> <p class="two">This is class two (Remove this)</p> <button>Remove Paragraph</button> <script> $( "button" ).click(function() { $( ".two" ).remove(); }); </script> </body> </html> |
How to remove Jquery element by id
Here we will remove html element based on id attribute.
$( "#one" ).remove(); line shows that remove the id with name one.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <style> .box{ padding:20px; border: solid red 2px; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h2>Example of Jquery remove() by id</h2> <p id="one" class="box">This is id one <button>Remove this</button></p> <p id="two" class="box">This is id two</p> <p id="tree" class="box">This is id three</p> <script> $( "button" ).click(function() { $( "#one" ).remove(); }); </script> </body> </html> |
Remove element from DOM
Here we have multiple paragraphs and each having box class on click on paragraph with box class we remove it from HTML Document Object Model
to remove this we used
$( ".box" ).click(function() {
$(this).remove();
});
$(this).remove() represents the .box
Read More
Jquery Html Method
Hide And Show Html Elements Using Jquery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html> <head> <style> .info{ background-color: #f1f1f1; border: 1px solid; } .box{ margin:15px; padding:15px; background-color: #fff; border: 1px solid green; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h2>Example of Jquery add and remove class</h2> <div class="info"> <p class="first box">This is first div</p> <p class="second box">This is second div</p> <p class="third box">This is third div</p> <p class="fourth box">This is fourth div</p> <p class="fifth box">This is fifth div</p> <p class="sixth box">This is sixth div</p> </div> <br/> <script> $( ".box" ).click(function() { $(this).remove(); }); </script> </body> </html> |
remove text from div
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html> <head> <style> .info{ background-color: #f1f1f1; border: 1px solid; } .box{ margin:15px; padding:15px; background-color: #fff; border: 1px solid green; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h2>Example of Jquery remove text</h2> <div class="info"> <p class="first box">This is first div</p> </div><br/> <button id="btn">Remove text</button> <br/> <script> $( "#btn" ).click(function() { $(".first").empty(); }); </script> </body> </html> |
Jquery add and remove element class attribute
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> <html> <head> <style> .failure{ padding:20px; border: solid red 2px; background-color: red; color:white } .success{ padding:20px; border: solid green 2px; background-color: green; color:white; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h2>Example of Jquery add and remove class</h2> <p id="one" class="box">This is id one </p> <button id="success_button">Success</button> <button id="failure_button">Failure</button> <script> $( "#success_button" ).click(function() { $( "p" ).removeClass("failure"); $( "p" ).addClass("success"); }); $( "#failure_button" ).click(function() { $( "p" ).removeClass("success"); $( "p" ).addClass("failure"); }); </script> </body> </html> |
Jquery remove child element
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html> <head> <style> .info{ background-color: #f1f1f1; border: 1px solid; } .box{ margin:15px; padding:15px; background-color: #fff; border: 1px solid green; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h2>Example of Jquery add and remove class</h2> <div class="info"> <p class="first box">This is first div</p> <p class="second box">This is second div</p> <p class="third box">This is third div</p> <p class="fourth box">This is fourth div</p> <p class="fifth box">This is fifth div</p> <p class="sixth box">This is sixth div</p> </div> <br/> <button id="b1">Remove first</button> <button id="b2">Remove last</button> <button id="b3">Remove one by one</button> <button id="b4">Remove all</button> <script> $( "#b1" ).click(function() { $( ".info" ).children(".first").remove(); }); $( "#b2" ).click(function() { $( ".info" ).children(".sixth").remove(); }); $( "#b3" ).click(function() { $( ".info p:nth-child(1)" ).remove(); }); $( "#b4" ).click(function() { $( ".info" ).children(".box").remove(); }); </script> </body> </html> |
jQuery remove parent element
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html> <html> <head> <style> .info{ background-color: #f1f1f1; border: 1px solid; } .box{ margin:15px; padding:15px; background-color: #fff; border: 1px solid green; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h2>Example of Jquery add and remove class</h2> <div class="info"> <p class="first box">This is first div</p> </div> <br/> <button id="b1">Remove Parent</button> <script> $( "#b1" ).click(function() { $( ".first" ).parent(".info").remove(); }); </script> </body> </html> |
How to remove a row from bootstrap table using jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <!DOCTYPE html> <html lang="en"> <head> <title>How to remove a row from bootstrap table using jQuery</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> <style> .hand{ cursor:pointer; } </style> </head> <body> <div class="container"> <div class="table-responsive"> <table class="table table-hover" id="student"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> <th>Delete</th> </tr> </thead> <tbody> <tr> <td>Ram</td> <td>Kumar</td> <td>ram@example.com</td> <td><i class="bi bi-trash hand"></i></td> </tr> <tr> <td>Mohan</td> <td>Kumar</td> <td>mohan@example.com</td> <td><i class="bi bi-trash hand"></i></td> </tr> <tr> <td>Sohan</td> <td>Kumar</td> <td>sohan@example.com</td> <td><i class="bi bi-trash hand"></i></td> </tr> </tbody> </table> </div> </div> <script> $("#student").on("click", ".bi-trash", function() { var del = confirm("Want to delete this?"); if(del == true){ $(this).closest("tr").remove(); }else{ return false; } }); </script> </body> </html> |