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);
    // …
}