Remove a filter

const [chips, setChips] = useState(["Chip 1", "Chip 2", "Chip 3"]);

const deleteChip = (chip: string) => {
  setChips((prevChips) => prevChips.filter((c) => c !== chip));
};

<div>
  {chips.map((chip) => (
    <GoabFilterChip
      key={chip}
      content={chip}
      onClick={() => deleteChip(chip)}
      mr="s"
    />
  ))}
</div>

chips: string[] = ["Chip 1", "Chip 2", "Chip 3"];

deleteChip(chip: string): void {
  this.chips = this.chips.filter((c) => c !== chip);
}

<div>
  @for (chip of chips; track chip) {
  <goab-filter-chip [content]="chip" (onClick)="deleteChip(chip)" mr="s">
  </goab-filter-chip>
  }
</div>

let chips = ["Chip 1", "Chip 2", "Chip 3"];
const container = document.getElementById("chip-container");

function renderChips() {
  container.innerHTML = "";
  chips.forEach((chip) => {
    const chipEl = document.createElement("goa-filter-chip");
    chipEl.setAttribute("version", "2");
    chipEl.setAttribute("content", chip);
    chipEl.setAttribute("mr", "s");
    chipEl.addEventListener("_click", () => deleteChip(chip));
    container.appendChild(chipEl);
  });
}

function deleteChip(chip) {
  chips = chips.filter((c) => c !== chip);
  renderChips();
}

renderChips();

<div id="chip-container"></div>