Как удалить инкрементный элемент в HTML с помощью JavaScript

ProgramBox

Как удалить инкрементный элемент в HTML с помощью JavaScript

Post author:admin
Запись опубликована:17 июля, 2022
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Итак, я хочу создать функцию, которая позволит мне добавлять / удалять элемент в HTML, я уже закончил с частью «добавить», которая увеличивает значение идентификатора при изменении (пример: id = tag1, id = tag2 и т. Д.). Моя проблема в части «удалить», я не знаю, как поместить инкрементное значение внутри onclick=remove_tag() . Вот мой код

 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 = "";
}

Что я хочу сделать, так это сделать так, чтобы мой onclick на кнопке был (onclick =»remove_tag1″, onclick =»remove_tag2″, onclick =»remove_tag3″ и т.д.). Извините за вопрос, все еще новичок в JavaScript. Спасибо за помощь. Вот изображение 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>
    ```

1. Вы хотите добавлять и удалять некоторую базу элементов для этих идентификаторов? не могли бы вы объяснить подробнее, я думаю, что есть лучшее решение, чем вы

2. Я создал поле выбора, в котором каждый раз, когда вы нажимаете на него что-то, оно добавляет его в <div id=»textarea»> . Я хочу, чтобы он работал так, чтобы я мог добавлять, если я нажимаю что-то в поле выбора, и удалять те, которые были выбраны из поля выбора, если я нажал кнопку X. Я добавил свой HTML-код и изображение его вывода.

Ответ №1:

Вы можете использовать атрибут данных на кнопке удаления, чтобы сохранить ссылку на добавленные элементы, когда захотите их удалить.

 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>

Развернуть фрагмент

Ответ №2:

Вы можете сделать это, отправив сам элемент через аргументы в функцию 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>";
    }

Затем по дереву DOM мы можем получить доступ к элементу и удалить его.

Дерево DOM для этого выглядит как div> li> span> button

Событие щелчка запускается на кнопке, поэтому функция будет выглядеть следующим образом:

 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);
    }

Я рекомендую вам прочитать больше о DOM

Метки: Как удалить инкрементный элемент в HTML с помощью JavaScript