如果 img src 损坏，则删除父元素和所有子元素答案

【问题标题】：Delete parent element and all children if img src broken如果 img src 损坏，则删除父元素和所有子元素
【发布时间】：2017-04-04 06:14:29
【问题描述】：

我正在做一个 Ajax 查询，它会拉回一个 JSON 数组，其中填充了大约 50 个图像的 URL。然后我在数组上使用forEach 来生成与其他<div> 嵌套的<div>，其中一个<div> 持有一个<img> 元素，其中我将src 设置为等于当前的url forEach 迭代。

问题是一些 url 已经失效，并导致 <img> 元素损坏（您知道，带有撕开文件的小图像吗？）。所以我所做的是，在迭代期间，当我创建我的<img> 元素时，我将onerror 属性设置为等于"$(this).closest('.gramDiv').remove()"，它试图删除某个<img> 父元素和所有该父元素的子元素。这行得通，但我觉得它有点hacky，而不是最佳实践。有更标准化的方法吗？

$(document).ready(function(){
    console.log("Ready");


        function adder(data,status){

            data.forEach((url,index)=>{
                let attrObj = {
                    src: url,
                    alt: 'photo ' + index, 
                    onerror: "$(this).closest('.targetDiv').remove()"
                };

                let img = $('<img>').attr(attrObj);

                let targetDiv = $('<div></div>').addClass('target');
                let picDiv = $('<div></div>').addClass('picDiv').append(img);

                let component = targetDiv.append(picDiv);

                $('#bodyDiv').append(component);
            })
        }  

        $.ajax({
            url:'https:/blahblahblah.json',
            dataType: 'json',
            success: adder,
            timeout: 3000,
            error: function(){ alert('error retrieving')}
        });


})

【问题讨论】：

您可以创建img 仅用于成功加载图像/
@Satpal 我该如何检查？
var img = new Image();img.src = url; img.onload = function () { //Append element };
试试这个 [链接] (stackoverflow.com/questions/3915634/…)
@MarkRomano 您可以使用链接中的 UrlExists 函数检查数组中的每个 url。如果找到该文件，则返回 statusCode 200 else 404

标签： javascript jquery html

【解决方案1】：

您可以尝试使用此代码

$("<img/>")
    .on('load', function() { console.log("image loaded correctly"); })
    .on('error', function() { console.log("error loading image"); })
    .attr("src", $(originalImage).attr("src"))
;

来自here

【讨论】：

【解决方案2】：

感谢@SabirAmeen 和link 的回答。

基本上，在forEach 块中，您希望在当前迭代的URL 上运行另一个ajax 调用，并检索它的status，这表明它是工作还是损坏。在我的例子中，一个工作的status 是200，其他我认为是坏的。

我已经从上面简化了我的代码，但它仍然说明了这一点：

$(document).ready(function(){
    console.log("Ready");


        //event.preventDefault();
        console.log("pressed");

        function adder(data,status){

            data = data.reduce(function(a,b){
                if(!a.includes(b)) a.push(b);
                return a;
            },[]);

            data.forEach((url,index)=>{             

                UrlExists(url, function(status){
                    if(status === 200){
                       // file was found
                       console.log('found:',status);
                       let img = $('<img>').attr('src',url);
                       $('body').append(img);
                    }
                    else {
                       // do nothing
                       console.log('not found:',status);
                    }
                });
            })
        }

        function UrlExists(url, cb){
            jQuery.ajax({
                url:      url,
                dataType: 'text',
                type:     'GET',
                complete:  function(xhr){
                    if(typeof cb === 'function')
                       cb.apply(this, [xhr.status]);
                }
            });
        }

        $.ajax({
            url:'https://yaddayadda.json',
            dataType: 'json',
            // success: adder,
            success: adder,
            //complete: remover,
            timeout: 3000,
            error: function(){ alert('error retrieving data fam')}
        });

})

【讨论】：