TechQA.

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

121 views Asked by At

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 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>

Thanks!

javascript html
Original Q&A
1

There are 1 answers

1
Chris W. On BEST ANSWER

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 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>

Related Questions in JAVASCRIPT

Related Questions in HTML

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions