title: How to delete element onclick in Reactjs?
body: <p>I have made CARD's which display's <code>username</code>. When I click on the delete button i.e cross or cancel button it should remove the CARD's from the <code>tasklist</code> here tasklist is state variable. I am using <code>.map()</code> method to iterate over each task and display it. I want to delete the task card of a particular user when I click on the red cross button (see screenshot) currently only the window appears saying -> <code>are you sure you want to delete it</code> if I click yes it should delete it.</p>
  
  <p>Code:</p>
  
  <pre><code>import React, {Component} from "react"; 
  
  export default class Tasks extends Component{
      constructor(props){
          super(props);
          this.state = {
              taskList:[],
              taskName:"",
              type:"classification",
              datasetName:"",
              allDatasets:[],
              users:[],
              names:[]
          }
      }
  
  triggerDelete(task){
          if(window.confirm("Are you sure you want to delete this task?")){
  
          }
      }
  
  render(){
          return(
              &lt;div className="tasks-wrap"&gt;
                  &lt;h1 onClick={()=&gt;{
                     this.props.history.push("/taskdetails");
                  }}&gt;Your Tasks&lt;/h1&gt;
                  {
                              this.state.taskList.map((task,index)=&gt;{
                                  return(
                                      &lt;div key={index} className="item-card" onClick={()=&gt;{
                                          window.sessionStorage.setItem("task",JSON.stringify(task));
                                          this.props.history.push("/taskdetails/");
                                      }}&gt;
                                          &lt;div className="name"&gt;{task.name}&lt;/div&gt;
                                          &lt;div className="sub"&gt;
                                              &lt;div className="type"&gt;Dataset: {task.dateSetName}&lt;/div&gt;
                                              &lt;div className="members"&gt;{task.userList.length + " participants"}&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div className="del-wrap" onClick={(e)=&gt;{
                                              e.stopPropagation();
                                              e.preventDefault();
                                              this.triggerDelete(task);
                                          }}&gt;
                                              &lt;img src={require("../../images/cancel.svg")}/&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  );
                              })
                          }
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>How should I modify my <code>triggerDelete()</code> method? So that the particular card gets deleted.</p>
  
  <p><a href="https://i.stack.imgur.com/ejhcN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ejhcN.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/KwN3C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KwN3C.png" alt="enter image description here"></a></p>