How to add button link inside a list-group-item in Bootstrap 5?-CodePudding

I'd like to have a list-group item have a link and a button to delete the item. How can I do this with Bootstrap 5? This is what I tried but it's not working.

  <div >
    <a href="/link1"  aria-current="true">
      Link1
      <span >
        <a href="/trash1" >
          <span  aria-hidden="true"></span>
        </a>
      </span>
    </a>
  </div>

CodePudding user response：

Your buttons will not work because your code has nested anchor tag

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<ul >
  <li >
   <a  href="/link1">Link 1</a>
    <a  href="/trash1" >x</a>
  </li>
  <li >
   <a  href="/link2">Link 2</a>
    <a  href="/trash2" >x</a>
  </li>
  <li >
   <a  href="/link3">Link 3</a>
    <a href="/trash3" >x</a>
  </li>
</ul>