Me las arreglé para eliminar el botón con <li> elemento class li_listItem" . Pero mi objetivo es hacer clic en eliminar <button> en sí mismo y también el elemento <li> con él. Por ahora solo puedo eliminar ambos elementos haciendo clic en él. ¿Puedo me ayudas con eso?
var ul = document.querySelector('#shopping_list__items'); function DeleteButtonOnclick(e) { const trgt = e.target.closest('.deleteBtn, .li_listItem'); if (trgt) trgt.remove(); } ul.addEventListener("click", DeleteButtonOnclick); <ul id="shopping_list__items"> <div class="flex"> <li class="li_listItem" random="23">Notebook</li> <button class="deleteBtn">Delete Button</button> </div> <div class="flex"> <li class="li_listItem">Jello</li> <button class="deleteBtn">Delete Button</button> </div> <div class="flex"> <li class="li_listItem">Spinach</li> <button class="deleteBtn">Delete Button</button> </div> <div class="flex"> <li class="li_listItem">Rice</li> <button class="deleteBtn">Delete Button</button> </div> <div class="flex"> <li class="li_listItem">Birthday Cake</li> <button class="deleteBtn">Delete Button</button> </div> <div class="flex"> <li class="li_listItem">Candles</li> <button class="deleteBtn">Delete Button</button> </div> </ul>Según su estructura html, la forma más sencilla es eliminar el padre del botón. (Espero no haber entendido mal lo que quieres hacer).
$(".deleteBtn").click(function(){ $(this).parent().remove(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <ul id="shopping_list__items"> <div class="flex"> <li class="li_listItem" random="23">Notebook</li> <button class="deleteBtn">Delete Button</button> </div> <div class="flex"> <li class="li_listItem">Jello</li> <button class="deleteBtn">Delete Button</button> </div> <div class="flex"> <li class="li_listItem">Spinach</li> <button class="deleteBtn">Delete Button</button> </div> <div class="flex"> <li class="li_listItem">Rice</li> <button class="deleteBtn">Delete Button</button> </div> <div class="flex"> <li class="li_listItem">Birthday Cake</li> <button class="deleteBtn">Delete Button</button> </div> <div class="flex"> <li class="li_listItem">Candles</li> <button class="deleteBtn">Delete Button</button> </div> </ul>Utilicé el método this.parentNode.remove() para eliminar tanto el elemento <li> como el elemento <button> dentro de cuando se hace clic en el elemento con el estilo de clase deleteBtn .
var elements = document.getElementsByClassName("deleteBtn"); var removeSelectedElement = function() { this.parentNode.remove(); }; for (var i = 0; i < elements.length; i++) { elements[i].addEventListener('click', removeSelectedElement, false); } <ul id="shopping_list__items"> <div class="flex"> <li class="li_listItem" random="23">Notebook</li> <button class="deleteBtn">Delete Button</button> </div> <div class="flex"> <li class="li_listItem">Jello</li> <button class="deleteBtn">Delete Button</button> </div> <div class="flex"> <li class="li_listItem">Spinach</li> <button class="deleteBtn">Delete Button</button> </div> <div class="flex"> <li class="li_listItem">Rice</li> <button class="deleteBtn">Delete Button</button> </div> <div class="flex"> <li class="li_listItem">Birthday Cake</li> <button class="deleteBtn">Delete Button</button> </div> <div class="flex"> <li class="li_listItem">Candles</li> <button class="deleteBtn">Delete Button</button> </div> </ul>