Delete a hidden field by its value

Question

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 common but hopefully this could be done with plain javascript.

Hmm tag got changed back to jquery again?

Please check the Jquery documentation here: http://api.jquery.com/category/selectors/attribute-selectors/ — Akshay Khandelwal, Oct 14 '13 at 08: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, Oct 14 '13 at 08:49
dont use just numbers for id http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Marius Darila, Oct 14 '13 at 08:50
@NabeelSheikh it's the right tag, and if you think i's wrong please suggest an edit — Simon Verhoeven, Oct 14 '13 at 08:57

MrCode · Accepted Answer · 2013-10-14T09:24:03.520

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();
}

edited Oct 14 '13 at 09:24

answered Oct 14 '13 at 08:49

MrCode

59,851
9
76
106

1

Was this a jQuery question? – Chris Kempen Oct 14 '13 at 08:52
3

@ChrisKempen, User seems to be using jQuery even though question has not been tagged. So, 50/50 I think. – Kaf Oct 14 '13 at 08:54
It could be either jQuery or Mootools. If it's Mootools then the attribute selector is exactly the same anyway. – MrCode Oct 14 '13 at 08:57
1

@ChrisKempen: I have done plain javascript version after user specified in his edit post. But I love this jQuery version more than mine. – Kaf Oct 14 '13 at 09:18
Updated answer with a Mootools solution (OP has changed the tag). – MrCode Oct 14 '13 at 09:25
2

since ids are unique: `$$("#productList input[value=" + id + "],#"+id).destroy();` - also, don't use numeric ids. prefix with an alpha. – Dimitar Christoff Oct 14 '13 at 09:37

Kaf · Answer 2 · 2013-10-14T09:26:37.283

2

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);

edited Oct 14 '13 at 09:26

answered Oct 14 '13 at 09:11

Kaf

30,825
7
51
74

2

Thanks, good solution. Would vote you up if I could but I went with MrCodes mootool solution. – Rode Oct 14 '13 at 09:34

score 0 · Answer 3 · answered Oct 14 '13 at 08:49

0

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

answered Oct 14 '13 at 08:49

Adrian Ber

17,162
9
57
99

2

Was this a jQuery question? – Chris Kempen Oct 14 '13 at 08:51
1

I suspect so from using the $ function. – Adrian Ber Oct 14 '13 at 08:54
Yes indeed, apologies... ;) – Chris Kempen Oct 14 '13 at 08:56
@AdrianBer, Mootools has also `$` – Sergio Oct 14 '13 at 17:16

Delete a hidden field by its value

3 Answers3