How to remove an incremental element in HTML using JavaScript-CodePudding

So I want to create a function that will let me add/remove an element in the HTML, I'm already done with the "add" part that increments the id value onchange (example: id=tag1, id=tag2, etc). My problem is on the "remove" part, I don't know how to put an incremental value inside onclick=remove_tag(). Here's my code

function update() {
  var selObj = document.getElementById("skill_tags");
  var selVal = selObj.options[selObj.selectedIndex].text;
  let counter = 0;
  document.getElementById("textarea").innerHTML  = "<div class='tags_inline' id='tag'><li class='list-inline-item'><span class='badge badge-dark'>"   selVal   "<button class='fa fa-times-circle text-white' id='delete' onclick=remove_tag('tag"  counter  "');></button></span></li></div>";
  $("#textarea div").each(function(i){this.id = "tag"   (i   1)})
}

function remove_tag(id) {
  document.getElementById(id).innerHTML = "";
}

What I want to do is to make my onclick on the button to be (onclick="remove_tag1", onclick="remove_tag2", onclick="remove_tag3", etc). Sorry for the question, still a newbie in JavaScript. Thanks for the help. Here's an image https://pasteboard.co/k7hb7cVHSQHj.png

<div class="resume-skill-item">
                        <h5>
                            <ul class="list-inline">
                                <div align="right">
                                    <select id="skill_tags" onchange="update()">
                                        <option selected="true" disabled="disabled">*Select All That Applies</option>
                                        <option value="mechanic">Mechanic</option>
                                        <option value="appliance_repairer">Appliance Repairer</option>
                                        <option value="carpenter">Carpenter</option>
                                        <option value="plumber">Plumber</option>
                                        <option value="technician">Technician</option>
                                    </select>
                                </div>
                            </ul>
                            <div id="textarea" class="large-single-textarea">
                            </div>
                        </h5>
                    </div>
    ```

CodePudding user response：

You can use data attribute on delete button to keep reference on added items when you want to delete them.

function update(e) {
  var selObj = document.getElementById("skill_tags");
  var selVal = selObj.options[selObj.selectedIndex].text;
  let counter = 0;
  document.getElementById("textarea").innerHTML  =
    `<div  id="${e.value}"><li ><span >"${selVal}"<button data-select-id="${e.value}"  id="delete" onclick=remove_tag(this) >remove</button></span></li></div>`;
}

function remove_tag(e) {
  document.getElementById(e.dataset["selectId"]).remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="resume-skill-item">
  <h5>
      <ul class="list-inline">
          <div align="right">
              <select id="skill_tags" onchange="update(this)">
                  <option selected="true" disabled="disabled">*Select All That Applies</option>
                  <option value="mechanic">Mechanic</option>
                  <option value="appliance_repairer">Appliance Repairer</option>
                  <option value="carpenter">Carpenter</option>
                  <option value="plumber">Plumber</option>
                  <option value="technician">Technician</option>
              </select>
          </div>
      </ul>
      <div id="textarea" class="large-single-textarea">
      </div>
  </h5>
</div>

CodePudding user response：

You can do it by sending the element itself thru args to the remove_tag function:

function update() {
        var selObj = document.getElementById("skill_tags");
        var selVal = selObj.options[selObj.selectedIndex].text;
        
        //add tag with a remove_tag(this) onclick action
        document.getElementById("textarea").innerHTML  =
            "<div class='tags_inline' id='tag'><li class='list-inline-item'><span class='badge badge-dark'>"   selVal  
            "<button class='fa fa-times-circle text-white' id='delete' onclick=remove_tag(this);></button></span></li></div>";
    }

Then by DOM tree we can access and remove the element.

The DOM tree for this looks like div > li > span > button

The click event is triggered on the button so the function will look like this:

function remove_tag(element) {
        //Here we grab the node that tag is on at the DOM tree
        let tag = element.parentNode.parentNode;
        //Same with the father div
        let div = tag.parentNode;
        //Then from that div we remove the selected element
        div.removeChild(tag);
    }

I recommend you to read more about the DOM