Insert node with the text of the clicked label-CodePudding

I have this section of code for an eCommerce.

function appendChildElement() {
    var labelOptionSelected = $("#filters fieldset label");
    labelOptionSelected.each(function() {
      labelOptionSelected.click(function() {
        setTimeout(function() {
          if ($(labelOptionSelected).hasClass('sr_selected')) {
            const text = $('.sr_selected').text();
            const insertNode = document.querySelector(".fg-container--filterSelected");
                  insertNode.innerHTML = "<a href='#' onclick='' class='fg-container--filterSelected-option'>"   text   " x</a>";
          }
        }, 500);
      });
    });
  }
  appendChildElement();

What I require is that each <label> clicked, copy the text of said <label> and insert it in a specific link.

That means that if I click on the <label 1>, copy the text of this <label> and create a link with the text and if I click on the <label 2> copy the text of this < label> and put it in another additional link.

I put the example of the code as it is currently working

<div class="container">
    <!-- Here the links of the clicked labels would be created -->
    <a href='#' onclick='removeThisFilter()' class='fg-container--filterSelected-option'>Clicked label 1Clicked label 2Clicked label 3Clicked label 4</a>
<div>
<fieldset>
    <label class="00001" title="00001" index="0">Category Name 1</label>
    <label class="00002" title="00002" index="1">Category Name 2</label>
    <label class="00003" title="00003" index="2">Category Name 3</label>
    <label class="00004" title="00004" index="3">Category Name 4</label>
</fieldset>

Currently the code works but not correctly, if I click on label 1, it adds the link with the text, but if I additionally click on label 2, it adds the text but within the same initial link. And what is required to be in a separate link within the same <div> resulting in something like this:

<div class="container">
    <a href='#' onclick='removeThisFilter()' class='fg-container--filterSelected-option'>Clicked label 1</a>
    <a href='#' onclick='removeThisFilter()' class='fg-container--filterSelected-option'>Clicked label 2</a>
    <a href='#' onclick='removeThisFilter()' class='fg-container--filterSelected-option'>Clicked label 3</a>
<div>
<fieldset>
    <label class="00001" title="00001" index="0">Category Name 1</label>
    <label class="00002" title="00002" index="1">Category Name 2</label>
    <label class="00003" title="00003" index="2">Category Name 3</label>
    <label class="00004" title="00004" index="3">Category Name 4</label>
</fieldset>

The functionality is basically for a category filter in the PDP of a page.

Annex mockup of what they request, maybe and they will understand me better with the image

Mockup

Tell me that you can help me please, I have looked in several parts but I can not find the solution.

Beforehand thank you very much

CodePudding user response：

Well, not sure if this was what you were after, but I simplified your code, made it so you can't add the same link twice and added a way for you to remove the links as well. Also, since you tagged this as jquery, I made it all jquery

$("#filters fieldset label").click(function() {
  let t = $(this).text().trim();
  let newlink = `<a href='#' onclick='removeMe(this)' class='fg-container--filterSelected-option' data-val="${t}">${t}</a>`;
  let exists = $(`.container a[data-val="${t}"]`).length > 0;
  if (!exists) $('.container').append(newlink)
});

function removeMe(el) {
  $(el).remove();
}

.container a,
label {
  display: block;
  margin: 2px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='filters'>
  <div class="container">
    <!-- Here the links of the clicked labels would be created -->
    <div>
      <fieldset>
        <label class="00001" title="00001" index="0">Category Name 1</label>
        <label class="00002" title="00002" index="1">Category Name 2</label>
        <label class="00003" title="00003" index="2">Category Name 3</label>
        <label class="00004" title="00004" index="3">Category Name 4</label>
      </fieldset>
    </div>

CodePudding user response：

In my opinion, you don't need to each <label> tag.

You can add click event by the way:

<script>
    const insertNode = $('.container')
    const filters = $('#filters')

    $('#filters fieldset label').click(function (e) {
        const text = $(this).text();

        // Check if a tag with the content TEXT has been added before or not
        // You can see detail find() function in here: https://api.jquery.com/find/
        // This is my way to check duplicate labels, you can consider another way
        const isAdded = insertNode.find('a[data-text="'  text  '"]');
        if (isAdded.length === 0) {
            const html = "<a href='#' data-text='"  text  "' onclick='' class='fg-container--filterSelected-option'>"   text   " x</a>"
            insertNode.append(html)
        }
    })
</script>

When clicking on <label>. The div tag looks like this:

<div class="container">
    <a href="#" data-text="Category Name 1" onclick="" class="fg-container--filterSelected-option">Category Name 1 x</a>
    <a href="#" data-text="Category Name 2" onclick="" class="fg-container--filterSelected-option">Category Name 2 x</a>
    <a href="#" data-text="Category Name 3" onclick="" class="fg-container--filterSelected-option">Category Name 3 x</a>
</div>

How to remove them, when you click on them. Follow your way, add onclick to each <a>:

<a href='#' onclick='removeThisFilter()'> </a>

Or try this way:

// event handle remove tag
insertNode.delegate('a', 'click', function () {
    $(this).remove();
})