我制作了这个小程序，用户在其中键入描述，然后键入URL，一旦他单击上传按钮，就会开始在各自的标题下填充它们。一旦填充了这些标题，我希望用户能够删除其中的一个或多个，如果他不喜欢的话，可以在URL下的填充结果旁边添加某种删除按钮，这样可以一次删除一行描述中的内容和URL。当用户单击上载按钮时，将自动为每一行填充此按钮。我知道样式不是最好的，但这两个标题(描述和URL(将挨在一起。一旦我想好如何删除，我会稍后对其进行样式设置。
function uploadOrder() {
showImage();
var description = document.getElementById("description");
var url = document.getElementById("url");
var image = document.getElementById("image");
var fatherDiv = document.getElementById("father-div");
var motherDiv = document.getElementById("mother-div");
var childDiv = document.getElementById("child-div");
fatherDiv.innerHTML = fatherDiv.innerHTML + '<div class="heading-2 sup pg2">'+description.value+'</div>';
motherDiv.innerHTML = motherDiv.innerHTML + '<div class="heading-2 sup pg2 url-header">'+url.value+'</div>';
childDiv.innerHTML = childDiv.innerHTML + '<div class="child">'+image.value+'</div>';
}
function showImage() {
var image = document.getElementById('image')
.style.display = "block";
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document Enrollment</title>
<meta content="Document Enrollment" property="og:title">
<meta content="Document Enrollment" property="twitter:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/item-enrollment.webflow.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({ google: { families: ["Roboto:100,300,regular,500,700,900","Michroma:regular"] }});</script>
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body>
<div class="third">
<div class="div-block-16 pg2">
<div class="div-block-12 _1 pg2">
<div class="div-block-26 pg2">
<h1 class="heading-2 brand pg2">DESCRIPTION</h1><input type="text" class="text-field brand pg2 w-input" maxlength="256" name="field-5" data-name="Field 5" placeholder="" id="description" required="">
</div>
<div class="div-block-14 pg2">
<h1 class="heading-2 model pg2">URL</h1><input type="text" class="text-field model pg2 w-input" maxlength="256" name="field-5" data-name="Field 5" placeholder="" id="url" required="">
</div>
</div>
<a href="#" onclick="uploadOrder()" class="button-5 pg2 upload w-button">Upload</a>
</div>
<div class="div-block-13 pg2 _1st">
<div class="supplier2 pg2">
<h1 class="heading-2 sup pg2">DESCRIPTION</h1>
<div id="father-div"></div>
</div>
<div class="supplier1 pg2">
<h1 class="heading-2 sup pg2 url-header">URL</h1>
<div id="mother-div"><div class="child" id="child-div"><img id="image" class="image-size"></div></div>
</div>
</div>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=619bd7ee1589fc4f77e4c19f" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<script src="j.js"></script>
</body>
</html>谢谢！
因此，如果我理解正确，这里有一个快速的PoC可以让你重新开始。最重要的是，我们添加了一个唯一的ID，以确保我们得到正确的删除内容，因为如果您有多个条目使用相同的字符串作为其值，那么您就无法很好地关联它们的关系来区分您实际想要删除的记录。请尝试一下，尽管总体上可以有所改进，希望这至少能让你重新开始学习，干杯。
function uploadOrder() {
showImage();
var description = document.getElementById("description");
var url = document.getElementById("url");
var image = document.getElementById("image");
var fatherDiv = document.getElementById("father-div");
var motherDiv = document.getElementById("mother-div");
var childDiv = document.getElementById("child-div");
const id = getUid();
fatherDiv.innerHTML = fatherDiv.innerHTML + `<div class="heading-2 sup pg2" data-id="${id}">${description.value}</div>`;
motherDiv.innerHTML = motherDiv.innerHTML + `<div class="heading-2 sup pg2 url-header" data-id="${id}">${url.value} <button onclick="removeItems(${id})">REMOVE</button></div>`;
childDiv.innerHTML = childDiv.innerHTML + '<div class="child">'+image.value+'</div>';
}
function showImage() {
var image = document.getElementById('image')
.style.display = "block";
}
removeItems = (id) => {
document.querySelectorAll(`[data-id="${id}"]`).forEach(e => e.remove());
}
// Provide a unique Id for each instance so we're not possibly removing the wrong things if their string values match.
getUid = () => Math.random().toString().substr(2, 8);div {
border: gray 1px dotted;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document Enrollment</title>
<meta content="Document Enrollment" property="og:title">
<meta content="Document Enrollment" property="twitter:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/item-enrollment.webflow.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({ google: { families: ["Roboto:100,300,regular,500,700,900","Michroma:regular"] }});</script>
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body>
<div class="third">
<div class="div-block-16 pg2">
<div class="div-block-12 _1 pg2">
<div class="div-block-26 pg2">
<h1 class="heading-2 brand pg2">DESCRIPTION</h1><input type="text" class="text-field brand pg2 w-input" maxlength="256" name="field-5" data-name="Field 5" placeholder="" id="description" required="">
</div>
<div class="div-block-14 pg2">
<h1 class="heading-2 model pg2">URL</h1><input type="text" class="text-field model pg2 w-input" maxlength="256" name="field-5" data-name="Field 5" placeholder="" id="url" required="">
</div>
</div>
<a href="#" onclick="uploadOrder()" class="button-5 pg2 upload w-button">Upload</a>
</div>
<div class="div-block-13 pg2 _1st">
<div class="supplier2 pg2">
<h1 class="heading-2 sup pg2">DESCRIPTION</h1>
<div id="father-div"></div>
</div>
<div class="supplier1 pg2">
<h1 class="heading-2 sup pg2 url-header">URL</h1>
<div id="mother-div"><div class="child" id="child-div"><img id="image" class="image-size"></div></div>
</div>
</div>
</div><br><br><br><br><br>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=619bd7ee1589fc4f77e4c19f" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<script src="j.js"></script>
</body>
</html>