I want to add a delete button under the last header next to the words being uploaded-CodePudding

I made this small program where a user types a description and then types a URL and once he clicks the upload button it starts to populate them under their respective headers. Once these headers are populated I want the user to be able to delete one or more of them if he doesn't like it by adding some sort of delete button next to populated results under URL which will delete both what's under description and URL one line at a time. This button will automatically be populated for each line when the user clicks the upload button. I know the styling isn't the greatest but these 2 headers (DESCRIPTION & URL) will be next to each other. I will style it later once I figure out how to delete.

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 >' description.value '</div>';

motherDiv.innerHTML = motherDiv.innerHTML   '<div >' url.value '</div>';

childDiv.innerHTML = childDiv.innerHTML   '<div >' 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 >
        <div >
          <div >
            <div >
              <h1 >DESCRIPTION</h1><input type="text"  maxlength="256" name="field-5" data-name="Field 5" placeholder="" id="description" required="">
            </div>
            <div >
              <h1 >URL</h1><input type="text"  maxlength="256" name="field-5" data-name="Field 5" placeholder="" id="url" required="">
            </div>
          </div>
          <a href="#" onclick="uploadOrder()" >Upload</a>
        </div>
        <div >
          <div >
            <h1 >DESCRIPTION</h1>
            <div id="father-div"></div>
          </div>
          <div >
            
            <h1 >URL</h1>
            <div id="mother-div"><div  id="child-div"><img id="image" ></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>

Thanks!

CodePudding user response：

So if I'm understanding correctly here's a quick PoC to get you going again. Most importantly we add a unique ID to ensure we get the right things to remove since if you had multiple entries using the same strings for their values, then you're not correlating their relationship very well to distinguish what records you actually want to be removing. Give it a try, though there's improvements that could be made overall hopefully this at least gets you back to learning, cheers.

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  data-id="${id}">${description.value}</div>`;

motherDiv.innerHTML = motherDiv.innerHTML   `<div  data-id="${id}">${url.value} <button onclick="removeItems(${id})">REMOVE</button></div>`;

childDiv.innerHTML = childDiv.innerHTML   '<div >' 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 >
        <div >
          <div >
            <div >
              <h1 >DESCRIPTION</h1><input type="text"  maxlength="256" name="field-5" data-name="Field 5" placeholder="" id="description" required="">
            </div>
            <div >
              <h1 >URL</h1><input type="text"  maxlength="256" name="field-5" data-name="Field 5" placeholder="" id="url" required="">
            </div>
          </div>
          <a href="#" onclick="uploadOrder()" >Upload</a>
        </div>
        <div >
          <div >
            <h1 >DESCRIPTION</h1>
            <div id="father-div"></div>
          </div>
          <div >
            
            <h1 >URL</h1>
            <div id="mother-div"><div  id="child-div"><img id="image" ></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>