Javascript 如何在元素上使用“删除”按钮，以使其不会'；t删除提交表单的功能

尝试制作一个可以创建不同模因的表单，并希望能够通过按钮删除模因，但仍然能够使用该表单创建更多模因。我知道我的删除按钮并没有删除正在创建的实际项目，但我不知道如何做。它应该分别删除每个模因。请帮忙

HTML:

搞笑图片制作
制造模因
填写表格，创造你自己的模因！
图像URL:


顶部文本：


底部文本：


创造你的模因！

爪哇：

设numKeys=null；
常数形式=
文件.getElementById（“格式”）；
常量日志=
document.getElementById（'log'）；
常量单击按钮=
document.getElementById（'memeButton'）；
表格.addEventListener（“提交”，
功能（事件）{
event.preventDefault（）；
const log=document.getElementById（'log'）；
const newPic=document.getElementById（“memeImage”）；
const textTop=document.getElementById（“topText”）；
const textbooth=document.getElementById（“bottomText”）；
const textonop=document.getElementById（'textonop'）；
const textOnBottom=document.getElementById（'textOnBottom'）；
//const meme=document.getElementById（“p”）；
numKeys=localStorage.length；
setItem（'newitem'+（numKeys+1），log）；
log.innerHTML+=“删除”；
textOnTop.textContent+=textTop.value；
textOnBottom.textContent+=textBottom.value；
var btn=document.getElementById（'removeMeme'）；
btn.onclick=函数（）{
document.getElementById（'textAlign'）.remove（）；
这个。删除（）；
};
form.reset（）；
});

尝试在btn.onclick函数中执行此操作：

btn.onclick = function () {
document.getElementById('textAlign').innerHTML='<p id = "log"></p> <div id = textOnTop></div> <div id = textOnBottom></div></p>';

this.remove();};

btn.onclick=函数（）{
document.getElementById（'textAlign'）。innerHTML='
'；
这个。remove（）；}；

---

我认为这应该行得通，因为在您的代码中，div中的所有HTML标记都已被删除。

这不是Java。这就是javascript。他们完全不同。谢谢！这很好，可以删除创建的第一个meme，还可以再次提交表单。唯一的问题是，如果创建了两个meme，删除按钮将只对第一个meme起作用，而第二个meme的删除按钮将不起作用。我可以尝试解决这个问题，但它需要使用一个数组，该数组将对HTML代码进行一点更改

let numKeys = null;
const form = 
document.getElementById("form");
const log = 
document.getElementById('log');
const clickButton = 
document.getElementById('memeButton');

form.addEventListener("submit", 
function(event) {
event.preventDefault();

const log = document.getElementById('log');
const newPic = document.getElementById("memeImage");
const textTop = document.getElementById("topText");
const textBottom = document.getElementById("bottomText");
const textOnTop = document.getElementById('textOnTop');
const textOnBottom = document.getElementById('textOnBottom');
// const meme = document.getElementById("p");

numKeys = localStorage.length; 

localStorage.setItem('newitem' + (numKeys + 1), log);


log.innerHTML += '<div><button type="submit" id="removeMeme" onclick="removeMeme()">Delete</button><img src="' + newPic.value + '" alt="Image" /></div>';
textOnTop.textContent += textTop.value;

textOnBottom.textContent += textBottom.value;

var btn = document.getElementById('removeMeme');
btn.onclick = function () {
    document.getElementById('textAlign').remove();
    this.remove();
};

form.reset();


});

btn.onclick = function () {
document.getElementById('textAlign').innerHTML='<p id = "log"></p> <div id = textOnTop></div> <div id = textOnBottom></div></p>';

this.remove();};