jQuery - Append/ Remove input or button value to list if checked / clicked

Question

I want to append the span to the list if it is the selected input, but then replace it with the next selected input, and if none, completely remove it.

I tried to assign a unique id tag to tell what input group the selection belongs to so that it only replaces/removes the tag from that group:

var sort_key = "sort-" + span;

And then used append and remove to target the tags from that group:

  if ($(this).is(":checked")) {
  $keys.append("" + span + ""); // Append the div from out of the loop
} else {
  if ($keys.has("#" + sort_key)) {
    $("#" + sort_key).remove();
  }
}

The span tags are being added, but my remove function isn't replacing the tags with the next selected value, only appending it again. How do I fix the remove(); function so that a span tag is appended given the input selection, and then replaced by the next selected input (or removed if unchecked).

Is there a way to create one function to handle append / remove of the tags instead if iterating for every on.change or on.click?

$(document).ready(function() {
  var allRadios = $("#radios input[type='radio']");
  $(allRadios).change(function() {
    var span = $(this)
      .closest("label")
      .find("input")
      .attr("value")
      .trim();

    var sort_key = "sort-" + span;
    var $keys = $('input[type="radio"]:checked')
      .closest(".all")
      .find(".selections");

    if ($(this).is(":checked")) {
      $keys.append("" + span + ""); // Append the div from out of the loop
    } else {
      if ($keys.has("#" + sort_key)) {
        $("#" + sort_key).remove();
      }
    }
    console.log(span);
  });
  var allCheckboxes = $("#checkboxes input[type='checkbox']");
  $(allCheckboxes).change(function() {
    var span = $(this)
      .closest("label")
      .find("input")
      .attr("value")
      .trim();

    var sort_key = "sort-" + span;
    var $keys = $('input[type="checkbox"]:checked')
      .closest(".all")
      .find(".selections");

    if ($(this).is(":checked")) {
      $keys.append("" + span + ""); // Append the div from out of the loop
    } else {
      if ($keys.has("#" + sort_key)) {
        $("#" + sort_key).remove();
      }
    }
    console.log(span);
  });
  $(".button").click(function() {
    var span = $(this)
      .text()
      .trim();
    var $keys = $(this)
      .closest(".all")
      .find(".selections");
    $keys.find("span").remove("#" + span);
    $keys.append("" + span + "");
    console.log(span);
  });
});

.selections {
  display: flex;
  algin-items: center;
  height: 40px;
}

.selections span {
  padding: 9px;
  min-height: 20px;
  border-radius: 6px;
  background: blue
}



  Selections Here:
  
    
      
         Up
    
    
      
         Down
    
    
      
      Sideways
    
  
  
    
      
         Food
    
    
      
         Drink
    
    
      
      Snack

zer00ne · Accepted Answer

Not 100% sure what OP objective is so here's an outline of what I understand it to be:

Three groups of inputs each a different [type]
- Each group is placed within its own
  .
- Each input is assigned a class that indicates which group it belongs to.
  - .rad for radio buttons
  - .chk for checkboxes
  - .btn for buttons
- The
When an input is selected, a tag appears above with the input's value and other tags are removed. Here's where it is unclear ... what exactly is removed?
- Are only the tags from that particular group removed?
- Are all tags removed regardless of group?
- Are the tags of the group currently being modified only removed if they are inactive?
- So I decided to implement #3 since it's the most useful.
- Added a
  and nested three
  s within it. Each article is assigned a class corresponding with a group: .rads, .chks, .btns.

Details are commented in the demo.

$(function() {

  // If any  is clicked...
  $('input').on('click', function(e) {

    // Store a htmlString of output.tag in a variable
    var tag = ``;

    /*
    if input.rad...
    Clear article.rads
    Append a .tag with its value to.rads
    */
    if ($(this).is('.rad')) {
      $('.rads').empty();
      $(tag).appendTo('.rads').val($(this).val());

      /*
      or if its input.chk...
      Clear article.chks
      On each .chk that is checked appand a tag with its
      value to .chks
      */
    } else if ($(this).is('.chk')) {
      $('.chks').empty();
      $('.chk:checked').each(function() {
        $(tag).appendTo('.chks').val($(this).val())
      });

      /*
      but if its input.btn...
      Remove .active class if it has it otherwise add it
      Clear article.btns
      On each button.active append a tag with its value to
      .btns 
      */
    } else if ($(this).is('.btn')) {
      //$(this).toggleClass('active');
      $('.btns').empty();
      // $('.btn.active').each(function() {

      $(tag).appendTo('.btns').val($(this).val())
      //});

      // Otherwise terminate function
    } else {
      return false;
    }
  });

});

.sel {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  height: 40px;
  background: rgba(100, 100, 100, 1);
}

.sel .tag {
  display: inline-block;
  padding: 9px;
  min-height: 20px;
  width: fit-content;
  border: 1px solid white;
  border-radius: 6px;
  color: white;
}

.rads .tag {
  background: red;
}

.chks .tag {
  background: green;
}

.btns .tag {
  background: blue;
}





  
    
    
    
  
  
    Radio Buttons
    
    1

    
    2

    
    3
  

  
    Checkboxes
    
    4

    
    5

    
    6
  

  
    Buttons

jQuery - Append/ Remove input or button value to list if checked / clicked

Answers (1)

Related Questions