Tengo el siguiente código en HTML:
$(".remove-post").click((event) => { $(event.target).fadeOut(); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="side-bar"> <button class="remove-post"> delete </button> <a class="list"> <p>post title</p> </a> <button class="remove-post"> delete <button> <a class="list"><p>another post title</p></a> </div>cada vez que hago clic en un botón Eliminar, quiero eliminar la etiqueta "a" más cercana con el párrafo dentro, así como el botón Eliminar solo. Pude eliminar el botón, pero no puedo apuntar a la etiqueta más cercana a ese botón en el que se hizo clic. Lo escribí en jQuery.
Si el botón siempre permanecerá antes del párrafo, puede hacer:
$(".remove-post").on("click", function () { $(this).next(".list").fadeOut() $(this).fadeOut() })Te recomendaría envolver el párrafo y el botón juntos como:
<div class="side-bar"> <div class="wrapper"> <button class="remove-post">Delete<button> <a class="list">Another post title</a> </div> <div class="wrapper"> <button class="remove-post">Delete <button> <a class="list">Another post title</a> </div> </div>Si lo hace, entonces puede usar esto:
$(".remove-post").on("click", function () { $(this).parent().fadeOut() })Suponiendo que desea eliminar el siguiente hermano de una lista, use a.list ()
$(".remove-post").on("click", function() { const btn = $(this) btn.add(btn.next("a.list")).fadeOut() }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="side-bar"> <button class="remove-post">delete</button> <a class="list"><p>post title</p></a> <button class="remove-post">delete</button> <a class="list"><p>another post title</p></a> </div> El .add() de jQuery se usa aquí para recopilar tanto el <button> como el <a> para que pueda desvanecerlos juntos.