javascript remove functionality is not working in IE

Question

I am working with dynamic textbox. when someone click on "Add Option" then textbox will be added dynamically. and when click on "Remove" the textbox will be removed dynamically. all the code of it is working fine with all browsers but "Remove" function is not working in IE 7

please help me regarding this issue

this is the javascript code

function addFormField()
{
  var optionId = $("#optionId").val();
  $("#pollOption").append("<p id='row" + optionId + "'><label for='txt" + optionId + "'>Option : <input type='text' size='20' name='option_"+optionId+"' id='option_"+optionId+"' name='option_"+optionId+"' class='text_field pollOption' validate='required:true'  \/> <a href='#' onclick='removeFormField(\"#row" + optionId + "\"); return false;'>Remove<\/a><\/br><\/p>");
  optionId = (parseInt(optionId) + 2) - 1;
  $("#optionId").val(optionId);
}

function removeFormField(optionId)
{
  $(optionId).remove();
  optionId = (parseInt(optionId) + 1) - 2;
}
$.validator.setDefaults(
{
  errorClass:"fontColorRed",
  submitHandler: function()
  {
    setPoll();
    return false;
  }
});

HTML code

<div class="pollContent">
        <div class="pollQuestionLable">
          Your poll Question </div>
        <div class="pollQuestionText">
          <input type="text" id="pollQuestion" class="text_field" name="pollQuestion" />
          <br/><a href="javascript:addFormField();">Add Options</a>
        </div>
        <div class="clearBoth"></div>
        <div class="pollQuestionLable">
          Poll Option
        </div>
        <div class="pollQuestionText">
          <div id="pollOption">
            <input type="hidden" id="optionId" value="3" />
            <p id='row1'>Option : <input type="text" id="option_1" name="option_1" class="text_field pollOption" validate='required:true' /></p>
            <p id='row2'>Option : <input type="text" id="option_2" name="option_2" class="text_field pollOption" validate='required:true' /></p>
          </div>
          <span id="ii" style="float:right">
            &nbsp;&nbsp;<input type="image" src="{$GLOBLE_PATH_REL}/images/share_bt.gif" />
          </span>
          <div class="wallPostToIcon4" id="wallPostToIcon4">
            <span class="sharingLockLeft" id="share" ><img src="{$GLOBLE_PATH_REL}/images/lock13.jpeg" border="0" alt="Share1" title="Share" /></span>
            <span class="sharingLockRight">&#9660;</span>
          </div>
          <div class="wallPostToPoll" id="wallPostToPoll">
            <ul>
              <li id="wallEveryOnePoll" value="1">Everyone</li>
              <li id="wallAllFriendsPoll" value="2">Friends of Friends</li>
              <li id="wallOnlyFriendsPoll" value="3">Friends Only</li>
              <li id="wallCustomizePoll" value="4">Customize</li>
             </ul>
          </div>
        </div>
        <div class="clearBoth"></div>
      </div>

Answer 1

I'm not sure, but your problem might come from the invalid html code you append to #pollOption . I refer to the <label> element you open and never close. And probably some other things I didn't see.

The fundamental problem here is that I didn't see those. I don't see them because your code is hardly readable and therefore prone to errors of various kinds. (evident also in the comment section of your question, people talk about "Oh, I missed that..").

I don't want to sound mean, but your code smells. (this isn't offensive: link ).

window.optionId = 2;

window.addFormField = function() {
    optionId += 1;
    var thisOption = $('<p>', {
        'id': 'row' + optionId
    }).append(
        $('<label>').attr({
            'for': 'txt' + optionId
        }).html('Option : '), 
        $('<input>').attr({
            'type': 'text',
            'size': 20,
            'name': 'option_' + optionId,
            'class': 'text_field pollOption',
            'validate': 'required:true'
        }), 
        $('<a>').attr({
            'href': '#'
        }).html('Remove').click(function() {
            thisOption.remove();
        })
    ).appendTo('#pollOption');
};

$.validator.setDefaults(
{
  errorClass:"fontColorRed",
  submitHandler: function()
  {
    setPoll();
    return false;
  }
});

I refactored your addFormField function:

• I let jQuery construct the elements, this way no invalid markup is ever generated or used.
• I embedded the remove function, so I can directly refer to the element I want to remove (without having to search for it in the DOM).
• optionId is now an Number variable you can simply increment (without any parsing).

This refactored code surely still smells, because of encapsulation issues (global variables everywhere!) and others, but I think it's more readable and little bit more robust.

Answer 2

I didn' understand few parts in your code. But I would suggest, if you are havving problems removing the element in IE, give this a try.

Description says it worked.

And there is always an option of setting innerHTML of that div to ""(empty string). I know thats not good, but the last thing that can be tried.