JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<button onclick="aliminarHijos()" type="button" name="button">Eliminar Hijos</button>

<div id="search_results">
  <div class="card">
    
  </div>
  <div class="card">
    
  </div>
   <div class="card">
    
  </div>
  <div class="card">
    
  </div>
</div>

CSS

#padre {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: auto;
  background: rgb(245, 245, 245);
}
#padre > div {
  background: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0.1);
  width: 100%;
  height: 200px;
  margin: 10px;
}

JavaScript

function aliminarHijos() {
  var search_results = document.getElementById("search_results");
  for (var i = 0; i < search_results.children.length; i++) {
    var card = search_results.children[i]
    search_results.remove(hijo)
  }
}