Checkbox Checked to remove a child div

Question

I'm using jQuery and removing a child div and it's controls from it's parent. I first attempted to use this method:

  $("[id^=SelectedUser]:checked").each(function () { //.val() contains numberical index of div to remove. $('#SUser' + $(this).val()).remove(); }); 

But that does not remove the element.

I found this works:

  $("[id^=SelectedUser]:checked").each(function () { $(this).parent().parent().remove(); }); 

Can anyone explain to me why my original concept does not work?

Answer 1

$this.val() is returning the value of the check box. Are you sure that those numbers are coinciding with your div's ID? Seems to be the only thing I can find "wrong" with your code. Also your numerical value is in a string format correct not an integer Correct?

Answer 2

Here is the html.

This generates the child div tags which contain user information. These are loaded into a static div with an ID of "SelectedSelections."

  $("#SelectedSelections").append("<div id='SUser" + counter + "' class='SelectedUsersRow'><div class='RowControl'><input type='checkbox' id='SelectedUser" + counter + "' value='" + index + "' onclick='enableDisableButtons(\\"REMOVESELECTIONS\\");'/></div><div class='RowContent'>" + $("#displayString" + index).html() + "</div>" + "<input type='Hidden' id='slastName" + counter + "' value='" + $("#lastName" + index).val() + "' />" + "<input type='Hidden' id='sCalledName" + counter + "' value='" + $("#CalledName" + index).val() + "' />" + "<input type='Hidden' id='sEmail" + counter + "' value='" + $("#Email" + index).val() + "' />" + "<input type='Hidden' id='sDom" + counter + "' value='" + $("#Dom" + index).val() + "' />" + "<input type='Hidden' id='sID" + counter + "' value='" + $("#ID" + index).val() + "' />" + "<input type='Hidden' id='sPhone" + counter + "' value='" + $("#Phone" + index).val() + "' /></div>");