How to remove dynamicaly created <div> tag if img src='undefined' in asp.net C#?

Question

I am trying to select folder content.This folder contain images when I am selecting that folder it will select all content.plus it is taking img src undefind. so I need to remove that how can I remove if src is undefined using asp.net c#

<div id="cell" class="box2">
    <a href="undefined">
        <img width="260px" height="135px" src="undefined"
            alt="" 
            style="box-shadow: 1px    2px 2px #BDBDBD;
            border: 1px solid #D1D1D1;">
       </img>
    </a>
</div>

Code behind file:

protected void chbindustry_SelectedIndexChanged(object sender, EventArgs e)
{
    if (result == false)
    {
        string[] subdirectoryEntries = Directory.GetDirectories(Server.MapPath("BusinessCards"));
        string f;
        string[] ss;
        string side = chklist.SelectedValue;// RadioButtonList1.SelectedValue;
        foreach (ListItem li in chbindustry.Items)
        {
            if (li.Selected)
            {

                ss = li.Text.Split('(');

                f = Server.MapPath("BusinessCards").ToString() + "\\" + ss[0];
                int c = f.Count();
                DirectoryInfo d = new DirectoryInfo(f);
                int len = d.GetFiles().Length;
                for (int i = 1; i <= d.GetFiles().Length / 3; i++)
                {
                    Page.ClientScript.RegisterArrayDeclaration("ImgPaths", "'" + "BusinessCards/" + f.Remove(0, f.LastIndexOf('\\') + 1) + "/" + i + ".jpg'");
                    Page.ClientScript.RegisterArrayDeclaration("refs", "'" + "DesignBCs.aspx?img=BusinessCards/" + f.Remove(0, f.LastIndexOf('\\') + 1) + "/" + i + "&Side=" + side + "'");
                }
            }
        }
    }
    result = true;
}

Dynamically creating div:

<script type="text/jscript">
    $(document).ready(function () {

        for (var i = 0; i < ImgPaths.length; i = i + 3) {
            var rowdiv = '<div id="row">';
            rowdiv = rowdiv + ' <div id="cell" class="box2">';
            rowdiv = rowdiv + ' <a href="' + refs[i] + '"><img width="260px" style="box-shadow: 1px 2px 2px #BDBDBD; border: 1px solid #D1D1D1;" height="135px" alt="" src="' + ImgPaths[i] + '"></img></a> ';
            rowdiv = rowdiv + ' </div>';
            rowdiv = rowdiv + ' <div id="cell" class="box2">';
            rowdiv = rowdiv + '  <a href="' + refs[i + 1] + '"><img width="260px" style="box-shadow: 1px 2px 2px #BDBDBD; border: 1px solid #D1D1D1;" height="135px" alt="" src="' + ImgPaths[i + 1] + '"></img></a>';
            rowdiv = rowdiv + '</div>';
            rowdiv = rowdiv + ' <div id="cell" class="box2">';
            rowdiv = rowdiv + ' <a href="' + refs[i + 2] + '"><img width="260px" style="box-shadow: 1px 2px 2px #BDBDBD; border: 1px solid #D1D1D1;" height="135px" alt="" src="' + ImgPaths[i + 2] + '"></img></a>';
            rowdiv = rowdiv + '</div>';
            rowdiv = rowdiv + '</div>';
            $("#table").append(rowdiv);
        }
    });
</script>

Answer 1

Handle the onError event for the image to call JavaScript function which will remove the div:

function imgError(divid) {
  document.getElementById(divid).style.display = 'none';
    return true;
}


<img src="image.png" onerror="imgError(divid);"/>

you need to pass div id to function which you want to hide.

Answer 2

If you don't mind using JQuery, this would work for you. See DEMO HERE

$(document).ready(function () {
    $('img[src="undefined"]').remove();
});

Updated DEMO to remove div.

$('img[src="undefined"]').parent().parent().remove();