jquery remove form input field

Okay I'm a newbie to jQuery and am getting stuck on .remove() after doing a click

jQuery:

$(document).ready(function () {
  $('.remove_group').click(function(){
    var remove_group_name = $(".test").val();
      $("#group_users["+remove_group开发者_运维问答_name+"][]").remove();
  });
});

HTML form:

<input type="text" class="test" name="group_users[test][]" id="group_users[test][]" value="test"> <a href="#" class="remove_group" id="test">Remove Group</a>

I want the "Remove Group link" when clicked remove the input field, all I get when I do click it is the webpage moving to the top...

the only warning on the page is: Expected attribute name or namespace but found ']'.

IDs in HTML documents cannot contain square brackets ([]). From the HTML spec:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Practically, you should limit yourself to letters, digits, hyphens and underscores.

First of all, your IDs contains illegal characters (refer to lonesomeday's answer).
Now if you always have the link next to the input, you can write something like this

One more thing, about when clicking the link the pages scroll to the top, this is because you are not preventing the default LINK behavior by using either: e.preventDefault; or return false;

Use the debugger and make sure the selector before ".remove();" is actually finding something. Most likely, it is incorrect. (Why does it have empty "[]" at the end?)

Try Debugger :

• Why class name and value is same