我无法获得等待添加或删除元素的 javascript 承诺？(似乎只等待 setTimeout())

Question

假设我有以下非常简单的javascript代码：

function addPicture(name){
    var src = document.getElementById("mainConsole");
    var img = new Image();
    img.onload=function() {
        img.id=name;
        src.appendChild(img);
    }
    img.src = name;
}
function clearpicture(name){
  var elem = document.getElementById(name);
  elem.remove();
}

只要这些功能没有被迅速地连续地隔离，这似乎是可行的。让用户点击链接：

<a href="javascript:void(0);" onclick="clearpicture('1.jpg');">test1</a>

正如人们所期望的那样删除图片。然而，如果我只是使用这个代码：

addPicture("1.jpg");
clearpicture(1.jpg");

我得到：TypeError: elem is null。我可以通过承诺来解决这个问题！

let p = new Promise(function(resolve, reject) {
    setTimeout(() => resolve(1), 1000); // (*)
    console.log("now");
}).then(function(result) {
    clearpicture("1.jpg");
});

一切正常(当然是在指定的延迟之后(。然后，我试图让promise在addpicture子例程上等待，而不是setTimeout:

let p = new Promise(function(resolve, reject) {
    addPicture("1.jpg","1",100,0,0);
resolve(1);
    
}).then(function(result) {
    clearpicture("1.jpg");
    console.log("picture removed");
});

我得到了相同的null错误。在我的实际应用程序中，我有时间加载图像，但如果我试图一次删除一系列图片：

clearpicture("1.jpg");
clearpicture("2.jpg");
clearpicture("3.jpg");

没有任何东西被删除——尽管注意会有一些延迟，因为我的两个子例程在实际添加或删除任何东西之前都会进行一些处理。

如何让javscript代码等待图像完全加载或实际删除后再执行其他操作？

Answer 1

function addPicture(name){
 return new Promise((resolve, reject)=>{
    var src = document.getElementById("mainConsole");
    var img = new Image();
    img.onload=function() {
        img.id=name;
        src.appendChild(img);
        img.src = name;
        return resolve(1)
    }
    
   img.onerror = function(){return reject()}
 }
}
addPicture.then(()=>clearPicture(name))
function clearpicture(name){
  var elem = document.getElementById(name);
  elem.remove();
}

Answer 2

function addPicture(name){
    var src = document.getElementById("mainConsole");
    var img = new Image();
    return new Promise(v => ( img.onload = _ => ( img.id = name
                                                , src.appendChild(img)
                                                , v(name)
                                                )
                            , img.src = name
                            ));
}
function clearPicture(name){
  var elem = document.getElementById(name);
  elem.remove();
}
function delay(value,ms){
  return new Promise(v => setTimeout(v,ms,value));
}
addPicture("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg").then(name => delay(name,1000))
                                                                  .then(clearPicture);

img {
  height : 100vh;
}

<div id="mainConsole"></div>

显示1秒，然后删除。