Develop Reference

.Remove() not working in deleting a textbox with id in the form of an collection

I have a hidden textbox with id in the form of a part of a collection. I use the ID in this way so as to have them bind to my model. This is the simplified version of my code.
<input id="Model.Bed[0].Id" name="Model.Bed[0].Id" type="hidden" value="bed1">
I am using Jquery to remove it but while it does not throw any error, it does not get deleted. This is my code.
$('#Model.Bed[0].Id').remove();
Am I missing something?

Your jQuery selector returns 0 items because it is an invalid selector expression( [ has a different meaning)
Try the name selector. This should work
$("[name='Model.Bed[0].Id']").remove();
Keep in mind that it is allowed to have more than one element with same name attribute value. So use based on your DOM.
Also, If you have this input element generated in a loop and you have some button inside this loop for executing your remove code, you should consider using relative selectors. closest() and find() methods are handy in this case.
For example,
// Register click event with element with css class "someDeleteBtn"
$(".someDeleteBtn").click(function(e){
e.preventDefault();
$(this).closest(".containerDiv") //get to outside container
.find(".myHdnBed") // find the hidden input with this css class
.remove(); // remove
});

To escape special characters in an ID selector, you can use \ like so:
$('#Model\\.Bed\\[0\\]\\.Id').remove();
which works: http://codepen.io/anon/pen/XpqJxV
Read more here: https://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/
In the end though, you really shouldn't have a value like that as an ID in the first place.

Inputs inside Div class be grouped as JSON array [duplicate]

I haven't found a concrete answer as to whether this is possible, but it seems like it should be...
I would like to serialize all the input elements contained in a div. I can't use a form, because it would be nested within another form. I would then get the values and post them via ajax.
Here is the jsFiddle example I am playing with:
http://jsfiddle.net/9uyz5/
If I change the root to a it works as expected.
Thanks for your help.
I've modified the jsfiddle from this other question:
https://stackoverflow.com/a/1186309/25020

you need to serialize all the inputs inside your container, not the actual container itself. so:
$('div :input').serialize()

Try this, to get all.
$('#divID *').serialize()

this also works with
$('div :input').serializeArray()
:)

For serializing the contents of the div with a button, this will be the more efficient way as it doesn't traverse through the entire dom.
$(this).closest('div').find("input,select,textarea").serialize();
make sure to attach this with the button event and make sure to include event.preventdefault with the button so that it does not submit the primary form if the div is inside it.

How to check what an element is if we only know its ID?

If we only know the ID of an element, is it possible to check using javascript or jQuery what kind of an element it is, whether its textarea, div, span or something else?

By using jQuery:
$("#someid").prop("tagName");
By using JavaScript:
document.getElementById("someid").tagName;

document.querySelector('#id').nodeName

Element duplicates when append

At first, I'm trying to create a basic tcg in jQuery, Ajax and PHP.
The following fiddle is my try to append the card to empty places and change the data attribute value, but When I click in a card, it creates other "cards" and the value doesn't changes.
http://jsfiddle.net/bNB89/1/
The code I tried to use for data changing:
$(this).data('place', 'field');
How can I fix this?

The problem in your code is that you are using append in a class, so the content is being created in every element containing that class. You should instead fetch for the first element with the class, append to it and then remove the class so it won't be selected again. I set up a fiddle demonstrating it http://jsfiddle.net/bNB89/2/

You get other cards because there are multiple .myslot elements and each one will get a copy.
Use a selector that will give you one item to append to. e.g. .myslot:empty:first.
.data() does not change data attributes it uses its own internal mechanism to store the data. If you really want to change the attribute you can use attr.
http://jsfiddle.net/bNB89/3/

access span in the from but undefined

I write something like this:
<form>
<input>text</input>
<div><span id="test">text</span></div>
.................
<button onclick="submitStudnetForm(this);"></button>
</form>
function submitStudnetForm(form){
alert(form['test']);
}
but it return undefined, and I don't where is wrong?
Thx in advance.

First off, this references the button rather than the form. Even if it did reference the form, the form element only contains references to input elements by name (not by id). You should use document.getElementById('test') instead. This assumes that there is only one such span on the page as there should be because ids must be unique.

Others have already said what I wanted to say. Also, is there a reason you're using a button with onclick to submit the form, rather than just input type="submit"? This way, users with javascript turned off won't be able to use that form.
(I can't insert this as a comment for some reason - I guess my reputation is too low for that?)

You're passing this, which is the button and you're trying to pull a property from it called test, which doesn't exist.

Form is not an array (it's a reference to a button element in this case) with an index named 'test'. when referring to elements by id you should use document.getElementById('test').