I need to delete a parent div on click child icon. For achieving this am using for loop for select all parent element and inside it am using function for deleting but I unable to understand where am making mistake. Right now am only able to delete one card but not every card. Kindly help to solve this.

css

.box {
            background:red;
            padding:10px;
            width:200px;
            display:none;
        }

        .selection-row {
            background:yellow;
            margin-bottom:10px;
        }

        .delete-selection-btn {
            background:red;
            width:150px;
            padding:20px;
        }

HTML

<div >
     <div  >
         Hell Shubham This is the data
         <div  >
             <div  >
                 <div  onclick="deleteRow()" id="Div4">
                     X1
                 </div>
             </div>
         </div>
     </div>

</div>

    <div >
     <div  >
         Hell Shubham This is the data
         <div  >
             <div  >
                 <div  onclick="deleteRow()" id="Div1">
                     X2
                 </div>
             </div>
         </div>
     </div>

</div>

    <div >
     <div  >
         Hell Shubham This is the data
         <div  >
             <div  >
                 <div  onclick="deleteRow()" id="Div2">
                     X3
                 </div>
             </div>
         </div>
     </div>

</div>

JS

<script>
    var selectionRow = document.getElementsByClassName('selectionRow');
    //var child = document.getElementById('selectionRow');

    for (i = 0; i < selectionRow.length; i  ) {
        var x = selectionRow[i];
        function deleteRow() {
           x.parentElement.remove();
          
        }
    }
</script>

CodePudding user response：

Here's another solution.

function deleteRow() {
  event.target.closest('.delete-row-btn').remove();
}

.box {
  background: red;
  padding: 10px;
  width: 200px;
  display: none;
}

.selection-row {
  background: yellow;
  margin-bottom: 10px;
}

.delete-selection-btn {
  background: red;
  width: 150px;
  padding: 20px;
}

<div >
  <div >
    Hell Shubham This is the data
    <div >
      <div >
        <div  id="Div4" onclick="deleteRow()">
          X1
        </div>
      </div>
    </div>
  </div>
</div>

<div >
  <div >
    Hell Shubham This is the data
    <div >
      <div >
        <div  id="Div1" onclick="deleteRow()">
          X2
        </div>
      </div>
    </div>
  </div>
</div>

<div >
  <div >
    Hell Shubham This is the data
    <div >
      <div >
        <div  id="Div2" onclick="deleteRow()">
          X3
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

You could give the parents an id and then pass the id to the function.

function delete_row(id) {
   document.getElementById(id).remove();
}

CodePudding user response：

This works for me:

<script>
    function deleteRow() {
        var div = event.target;
        var row = div.parentNode.parentNode.parentNode;
        row.parentNode.removeChild(row);
    }
</script>

You have to take clicked element, then get his parent (three times to get .selection-row). Then you have the row you want to delete. Now you can get its parent and remove its child.

CodePudding user response：

You can use the .closest method https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

onclick="this.closest('.selection-row').remove()"

CodePudding user response：

Here you have a solution, hope it helps :)

function deleteRow(el){
  let parent = el.parentElement;
  //when click in button go to select the parent element until we have selected the row div which contains class "delete-row-btn"
  while( !parent.classList.contains('delete-row-btn') ){
    parent = parent.parentElement;
  }
  
  //now parent = div.delete-row-btn and we go to remove it
  parent.parentElement.removeChild(parent)
  
}

.box {
            background:red;
            padding:10px;
            width:200px;
            display:none;
        }

        .selection-row {
            background:yellow;
            margin-bottom:10px;
        }

        .delete-selection-btn {
            background:red;
            width:150px;
            padding:20px;
        }

<div>

<div >
     <div  >
         Hell Shubham This is the data
         <div  >
             <div  >
                 <div  onclick="deleteRow(this)" id="Div4">
                     X1
                 </div>
             </div>
         </div>
     </div>

</div>

    <div >
     <div  >
         Hell Shubham This is the data
         <div  >
             <div  >
                 <div  onclick="deleteRow(this)" id="Div1">
                     X2
                 </div>
             </div>
         </div>
     </div>

</div>

    <div >
     <div  >
         Hell Shubham This is the data
         <div  >
             <div  >
                 <div  onclick="deleteRow(this)" id="Div2">
                     X3
                 </div>
             </div>
         </div>
     </div>

</div>
</div>