Así que quiero crear una función que me permita agregar/eliminar un elemento en el HTML, ya terminé con la parte "agregar" que incrementa el valor de id al cambiar (ejemplo: id=tag1, id=tag2, etc.) . Mi problema está en la parte "eliminar", no sé cómo poner un valor incremental dentro de onclick=remove_tag(). Aquí está mi código
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 = ""; }Lo que quiero hacer es hacer que mi onclick en el botón sea (onclick="remove_tag1", onclick="remove_tag2", onclick="remove_tag3", etc.). Perdón por la pregunta, todavía soy un novato en JavaScript. Gracias por la ayuda. Aquí hay una imagen 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> ```Puede usar el atributo de datos en el botón Eliminar para mantener la referencia en los elementos agregados cuando desee eliminarlos.
function update(e) { 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="${e.value}"><li class="list-inline-item"><span class="badge badge-dark">"${selVal}"<button data-select-id="${e.value}" class="fa fa-times-circle text-white" 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>Puede hacerlo enviando el elemento mismo a través de argumentos a la función remove_tag:
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>"; }Luego, mediante el árbol DOM, podemos acceder y eliminar el elemento.
El árbol DOM para esto se parece a div> li> span> button
El evento de clic se activa en el botón, por lo que la función se verá así:
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); }Te recomiendo que leas más sobre el DOM