Remove every element from the div except for a select few

Question

Remove every element from the div except for a select few

Imagine having a container with various elements like the ones below.

<div id="ans" style="background-color: #FFD993;
    color: #FFF;
    overflow:auto;
    border: 1px outset #4f6417;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;width:100%;text-align: center;height:33%;margin-bottom:    0px;">
    <input type="button" id="again" value="See Again"></input>
    <input type="button" id="prac" value="Practice"></input>
    <img id="theImg" src="result/' + rand + '.png" width="40%" height="60%"/>
    <a href="1.html">1</a>
    <a href="2.html">2</a>
    <p>This is Paragraph</p>
</div>

I would like to remove all the elements inside this div except for the two buttons. I have tried using:

$('#ans').empty();

However, this method clears out all contents. Is there a way to specifically filter the removal?

javascript jquery html css

Answer 1

Answer №1

What if we only keep the input elements and remove all other children?

$('#ans').children(':not(input[type="button"])').remove();

Check out this FIDDLE for reference.

Answer 2

What if we only keep the input elements and remove all other children?

$('#ans').children(':not(input[type="button"])').remove();

Check out this FIDDLE for reference.

Answer 3

Answer №2

One way to achieve this is by using the replaceWith() method:

$('#ans').replaceWith(function() { return $('input', this) });

Check out the Fiddle Demo for a visual representation

If you need to preserve the parent div, you can follow @adeneo's suggestion:

$('#ans').find(':not(input)').remove();

Answer 4

One way to achieve this is by using the replaceWith() method:

$('#ans').replaceWith(function() { return $('input', this) });

Check out the Fiddle Demo for a visual representation

If you need to preserve the parent div, you can follow @adeneo's suggestion:

$('#ans').find(':not(input)').remove();

Remove every element from the div except for a select few

Answer №1

Answer №2

Similar questions

React Alert: __WEBPACK_IMPORTED_MODULE_4_jquery___default(...) is throwing an error and modal function is not working

Error encountered when auto-generating IDs in Next.js with Firebase Firestore database

Execute JavaScript AJAX Request On Page Load

Modify the parent window's URL with the help of fancybox

When the width of a tr tag is reduced, an <select> and <span> tag will split into two lines

Invoke PHP by clicking on a button

The Ajax request returns a 200OK status code indicating success, yet the response payload is missing

I encountered a crash in my app because of an error in my Node.js backend code that was posting the accessories and slug into the database

Tips for toggling Bootstrap 5 tabs using JavaScript instead of the button version

The ajax keypress event is malfunctioning and the ActionResult parameter is failing to capture any data

Need to specify the file type at the end of the URL for HTML input

What causes background images to be affected by collapsing margins?

Custom ID in Firebase Firestore is not generating a new document even after successfully creating a new user

Adding a fresh dependency to the current package.json file

Setting the OrbitControls Position in ThreeJS

Leveraging jQuery to extract numerous concealed data from a webpage based on their names

What is the best way to pass JavaScript object literals from a Node.js server to the frontend browser?

JavaScript - Global Variable

Simple Steps to Connect an HTML File to CSS in Windows Notepad

Need a tool for validating forms?