I have a page with some values that looks like this:

 <div id="productList" >
   <input type="hidden" name="product[0].id" value="21">
   <div id="21" >BeanCounter</div>
   <input type="hidden" name="product[1].id" value="22">
   <div id="22" >CallGate</div>
</div>

Now I want to delete the hidden field with value=21 and the div with id=21.

I have this:

function remove(id){
    var remove = $(id);
    $('productList').removeChild(remove);

But how do I delete the hidden field? Can you get an object by its value?

edit missed the mootools tag, not sure where the jquery tag came from. I guess mootools isn't that mon but hopefully this could be done with plain javascript.

Hmm tag got changed back to jquery again?

I have a page with some values that looks like this:

 <div id="productList" >
   <input type="hidden" name="product[0].id" value="21">
   <div id="21" >BeanCounter</div>
   <input type="hidden" name="product[1].id" value="22">
   <div id="22" >CallGate</div>
</div>

Now I want to delete the hidden field with value=21 and the div with id=21.

I have this:

function remove(id){
    var remove = $(id);
    $('productList').removeChild(remove);

But how do I delete the hidden field? Can you get an object by its value?

edit missed the mootools tag, not sure where the jquery tag came from. I guess mootools isn't that mon but hopefully this could be done with plain javascript.

Hmm tag got changed back to jquery again?

• javascript
• mootools

• Please check the Jquery documentation here: api.jquery./category/selectors/attribute-selectors – Akshay Khandelwal Commented Oct 14, 2013 at 8:48
• what is productList is it id or class name. if class name then use dot(.) else if it is id then use # – Code Lღver Commented Oct 14, 2013 at 8:49
• 3 dont use just numbers for id stackoverflow./questions/70579/… – Marius Darila Commented Oct 14, 2013 at 8:50
• -1 for not including jquery tag. – Joke_Sense10 Commented Oct 14, 2013 at 8:52
• 1 @NabeelSheikh It's not the wrong tag, this is Javascript.. – George Commented Oct 14, 2013 at 8:54

3 Answers 3

Mootools solution:

function remove(id){
    $('productList').getElements('input[value="' + id + '"], div[id="' + id + '"]').destroy();
}

jQuery solution:

function remove(id){
    $('input[value="' + id + '"], div[id="' + id + '"]').remove();
}

Using plain javascript as mentioned in the edited post:

var checkVal = '21';

var parentDiv = document.getElementById('productList');
var inps = parentDiv.getElementsByTagName('input');
var inpRemove = null;

//Get the div to be removed
var divRemove = document.getElementById(checkVal);

for(var i=0; i<inps.length; i++)
{
   if(inps[i].value == checkVal)
   {
      //Get the input to be removed (Assuming only input with same value)
      inpRemove = inps[i];
      break;
   }
}

//Remove both here
parentDiv.removeChild(inpRemove);
parentDiv.removeChild(divRemove);

$("DIV#21, INPUT[value='21']").remove()