Is there a way to make the delete icon appear for every card when I checked the checkbox?

I am unable to make the trash icon visible more than one when I checked the checkbox element.

The first card only shows the trash icon, and the rest of the cards are not showing.

I have tried getElementById, querySelectorAll and getElementsByClassName. Nothing works properly as expected.

enter image description here

Can you find the logic error in the code?

function check() {

  if (document.querySelector(".check").checked == true) {
    document.querySelector(".deleteButton").style.visibility = "visible";
  } else {
    document.querySelector(".deleteButton").style.visibility = "hidden";
  }
}
.deleteButton {
  visibility: hidden;
}
<div class="col-sm-12">
  <div class="card">
    <div class="card-body">
      <div class="form-check">
        <a onclick="check()">
          <input type="checkbox" class="check">
        </a>
      </div>
      <h4 class="card-title">
        Description 1
          <a class="btn btn-outline-info deleteButton" href="/delete-todo/?id1">
            <i class="fas fa-trash-alt" disabled="disabled"></i>
          </a>
      </h4>
    </div>

  </div>
  <br>
</div>
<div class="col-sm-12">
  <div class="card">
    <div class="card-body">
      <div class="form-check">
        <a onclick="check()">
          <input type="checkbox" class="check">
        </a>
      </div>
      <h4 class="card-title">
                Description 2
          <a class="btn btn-outline-info deleteButton" href="/delete-todo/?id2">
            <i class="fas fa-trash-alt" disabled="disabled"></i>
          </a>
      </h4>
    </div>

  </div>
  <br>
</div>
<div class="col-sm-12">
  <div class="card">
    <div class="card-body">
      <div class="form-check">
        <a onclick="check()">
          <input type="checkbox" class="check">
        </a>
      </div>
      <h4 class="card-title">
                Description 3
          <a class="btn btn-outline-info deleteButton" href="/delete-todo/?id3">
            <i class="fas fa-trash-alt" disabled="disabled"></i>
          </a>
      </h4>
    </div>

  </div>
  <br>
</div>

Answer

Don’t wrap a checkbox in a link

Also delegate

I delegate from a div I called container. It needs to be the nearest common container for your cards

document.getElementById("container").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("check")) {
    tgt.closest(".card-body").querySelector(".deleteButton").classList.toggle("hide", !tgt.checked)
  }
  else if (tgt.closest("a").classList.contains("deleteButton")) {
    e.preventDefault();
    tgt.closest(".card").remove()
  }
})
.hide {
  display: none
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<div id="container">
  <div class="col-sm-12">
    <div class="card">
      <div class="card-body">
        <div class="form-check">
          <input type="checkbox" class="check">
        </div>
        <h4 class="card-title">
          Description 1
          <a class="btn btn-outline-info deleteButton hide" href="/delete-todo/?id1">
            <i class="fas fa-trash-alt" disabled="disabled">Delete</i>
          </a>
        </h4>
      </div>

    </div>
    <br>
  </div>
  <div class="col-sm-12">
    <div class="card">
      <div class="card-body">
        <div class="form-check">
          <input type="checkbox" class="check">
        </div>
        <h4 class="card-title">
          Description 2
          <a class="btn btn-outline-info deleteButton hide" href="/delete-todo/?id2">
            <i class="fas fa-trash-alt" disabled="disabled">Delete</i>
          </a>
        </h4>
      </div>

    </div>
    <br>
  </div>
  <div class="col-sm-12">
    <div class="card">
      <div class="card-body">
        <div class="form-check">
          <input type="checkbox" class="check">
        </div>
        <h4 class="card-title">
          Description 3
          <a class="btn btn-outline-info deleteButton hide" href="/delete-todo/?id3">
            <i class="fas fa-trash-alt" disabled="disabled">Delete</i>
          </a>
        </h4>
      </div>

    </div>
    <br>
  </div>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *