问我想在上传的单词旁边的最后一个标题下添加一个删除按钮。
EN

Stack Overflow用户

提问于 2022-01-04 19:31:29

回答 1查看 73关注 0票数 1

我制作了一个小程序，用户输入一个描述，然后输入一个URL，一旦他单击“上传”按钮，它就开始在各自的标题下填充它们。一旦填充了这些标题，如果用户不喜欢的话，我希望用户能够删除其中的一个或多个标题，方法是在URL下填充的结果旁边添加某种delete按钮，这将同时删除描述下的内容和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>

谢谢!

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-01-04 20:07:10

因此，如果我的理解是正确的，这里有一个快速的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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70584105

复制

相似问题

问我想在上传的单词旁边的最后一个标题下添加一个删除按钮。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我想在上传的单词旁边的最后一个标题下添加一个删除按钮。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我想在上传的单词旁边的最后一个标题下添加一个删除按钮。
EN