Aquí estoy tratando de atravesar hacia abajo y eliminar el div más cercano con la clase div2 pero no funciona correctamente.
El problema es si hago clic en el botón de cancelación aleatoria para, por ejemplo, hacer clic en el botón de cancelar por fin.
$(document).on("click", ".cancel", function () { $('.div').find('.div2').first().remove(); $(this).closest('.div1').remove(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="div"> <div class="div1"> <button class="cancel" type="button">Cancel</button> </div> <div class="div2"> <p>hello</p> </div> <div class="div1"> <button class="cancel" type="button">Cancel</button> </div> <div class="div2"> <p>hello2</p> </div> <div class="div1"> <button class="cancel" type="button">Cancel</button> </div> <div class="div2"> <p>hello3</p> </div> <div class="div1"> <button class="cancel" type="button">Cancel</button> </div> <div class="div2"> <p>hello4</p> </div> </div>Podría hacerlo de esta manera, eliminar el div después del padre (el siguiente div2) y luego eliminar el padre (el div1)
$(document).on("click", ".cancel", function() { let $_parent = $(this).parent(); $_parent.next('div').remove(); $_parent.remove(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="div"> <div class="div1"> <button class="cancel" type="button">Cancel</button> </div> <div class="div2"> <p>hello</p> </div> <div class="div1"> <button class="cancel" type="button">Cancel</button> </div> <div class="div2"> <p>hello2</p> </div> <div class="div1"> <button class="cancel" type="button">Cancel</button> </div> <div class="div2"> <p>hello3</p> </div> <div class="div1"> <button class="cancel" type="button">Cancel</button> </div> <div class="div2"> <p>hello4</p> </div> </div>