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
| <!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> |
Jquery remove element by class 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> |
Jquery remove element by id
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
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 … Read more