Remove child not working

Question

Hai

I am doing a web page. In that there is a drop down contains some products, when we select an item it will display below with a remove button as dynamically. My problem is that al the products removed correctly but a product that has product id 5 is not removed? What's the problem? Below is my code

<script type="text/javascript>
function validate(frm_name){
var hiddenFeild = document.getElementById('product');
var addedItems = hiddenFeild.value;
var brokenItems = addedItems.split(",");
    if(isEmpty(hiddenFeild.value)){
     alert("No Product Added.");
     return false;
    }
    if(brokenItems.length < 3){
     alert("Please Add One More Product.");
     return false;
    }
    return true;
}
function removeme(id){
compareDiv = document.getElementById('compare_product');
var remDiv = document.getElementById(id);
compareDiv.removeChild(remDiv);
var hiddenFeild = document.getElementById('product');
var addedItems = hiddenFeild.value;
var brokenItems = addedItems.split(",");
hiddenFeild.value = '';
for(var i = 0 ; i < brokenItems.length-1; i++){
    if(brokenItems[i] != id){
     hiddenFeild.value = hiddenFeild.value +brokenItems[i]+',';
    }
}
}
function selectProduct(){
    var flag = 0;
    compareDiv = document.getElementById('compare_product');
    var proValue = document.getElementById('frm_product').value;
    if(proValue != 0){
     var product = proValue.split("productvalue");
     var productid = product[0];
     var productname = product[1];
     var hiddenFeild = document.getElementById('product');
     var addedItems = hiddenFeild.value;
     var brokenItems = addedItems.split(",");
      for(var i = 0 ; i < brokenItems.length; i++){
        if(brokenItems[i] == productid){ 
         flag = 1;
         alert('Already Added');
        }
     }
     if(flag == 0){
      hiddenFeild.value = hiddenFeild.value +productid+',';
      compareDiv.innerHTML = compareDiv.innerHTML + '<div id="'+productid+'" style="height:30px;"><div style="float:left;" id="added_product">'+productname+'</div><div style="float:right;"><input onClick="removeme('+productid+');" id="remove" name="remove" type="button" value="remove" /></div></div>';
     }
    }
}

</script>

Answer 1

In general removeChild has to be called from the parent node of the node that should be removed. So try this:

function removeme(id) {
    var remDiv = document.getElementById(id);
    remDiv.parentNode.removeChild(remDiv);
    // …
}