0

I am generating HTML table rows with data dynamically based on salesforce data from apex. Below is the structure.

    <template for:each={Details} for:item="Detail">
      <tr data-id={Detail.pbId} key={Detail.pbId}>
        <td>
        <input name={Detail.pbId} value={Detail.pbOrder} size="1"></input>
        </td>
        <td>
        <lightning-button-icon id={Detail.pbId} icon-name="utility:delete" variant="bare" onclick={handleRemove}></lightning-button-icon>
        </td>
      </tr>
    </template>

    handleRemove(event){
        var id = event.target.id;
        var rowId = event.target.closest("tr").id;
        alert(rowId +' '+ id);
        // this.template.querySelectorAll(id).style="display:none";
        // this.template.querySelectorAll(id).classList.add('hide');
        // this.template.querySelector('.id').style="color:red";
        // this.template.querySelectorAll('[id="' +id+ '"]').classList.add('hide');
        // this.template.querySelectorAll('[id="' +id+ '"]').className = 'hide';
        const theDiv = this.template.querySelector('[data-id="' +id+ '"]');
        theDiv.className = 'hide';
}

.hide{
    display: none;
}

I want to delete the row from the dom when delete button is clicked. In the JS you can see I have tried lot of things but none of them worked. Can anyone guide me towards the right way to hide in LWC JS Tried below link as well: Use template.querySelector with variable for selector?

Previously in Aura I have dome similar functionality using below line but it is not working in LWC. Or maybe I am doing something wrong.

document.getElementById(recordId).style.display = 'none';
Improve this question
4
  • Do you want to delete the element, or merely hide it? Commented Aug 20, 2021 at 6:39
  • if I have to delete from the shadow dom or dom then what method should i use? Commented Aug 20, 2021 at 6:58
  • I was able to use .remove() to remove from dom as well. Commented Aug 20, 2021 at 7:04
  • you can add isHidden property to you Details items in JS and then when you iterate use <template if:false={Detail.isHidden}>. But CSS classes can also work Commented Aug 20, 2021 at 7:20

1 Answer 1

Reset to default
1

You can use classList on your tr to add hidden class and this should work.

handleRemove(event){
        var id = event.target.id;
        const tr = event.target.closest("tr");
        tr.classList.add('hide');
}
Improve this answer
2
  • Omg thanks it worked. But I am still trying to understand what was I doing wrong? Why didnt it worked with data-id? All the ids and data-id for the row I am settign the same value. Then why? Commented Aug 20, 2021 at 6:56
  • 1
    because you need to use classList and then add/remove/toggle methods. When you were using classList in comented code you used incorrect selector [id="' +id+ '"] instead of [data-id="' +id+ '"] Commented Aug 20, 2021 at 7:18

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.