0
211
ViewsEliminar un elemento de elemento de lista con Jquery
Creé un formulario simple que toma un nombre de entrada y cuando hago clic en enviar, agregará el nombre de salida en una lista desordenada con un botón de eliminación al lado de cada elemento. Pero cuando hago clic en el botón Eliminar (X), todavía deja el botón X allí, y cuando tengo varias listas, elimina toda la lista en lugar de la lista que corresponde a cada elemento.
$("button#submit").click((e) => { e.preventDefault(); let name = $("#name").val(); console.log(name); $("ul#submittedName").append( "<div class='container'><div class='row'><div class='col-sm'><li id='nameList'>" + name + "</div><div class='col-sm'><a class='delete' href='#'>X</a></div></div></div></li>" ); $("#name").val(""); }); $("ul").on("click", ".delete", function(e) { console.log(e.target); $("li#nameList").remove(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> <form id="formName" class="align-center p-3 mx-auto"> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">Name</label> <input type="text" class="form-control" id="name" aria-describedby="emailHelp" /> </div> <button id="submit" type="submit" value="Submit" class="btn btn-primary"> Submit </button> </form> <ul id="submittedName" class="align-center p-3 mx-auto"></ul>1 answers
Answer question0
Como se indica en los comentarios, las identificaciones están destinadas a ser únicas, pero puede hacerlo sin el uso de la identificación en absoluto, y dado que también desea eliminar el botón Eliminar, simplemente obtenga el antepasado div.container y elimínelo, esto eliminará el li y el botón de eliminar:
$("ul").on("click", ".delete", function(e) { $(this).closest('div.container').remove(); }); Si arregla su HTML para que sea compatible, todo lo que necesita hacer es $(this).closest('li').remove() en su controlador de eventos. Aquí hay un ejemplo compatible con HTML para lo que está tratando de hacer
$(function(){ $("button#submit").click((e) => { e.preventDefault(); let name = $("#name").val(); $("ul#submittedName").append("<li>" + name + " <a class='delete' href='#'>X</a></li>"); $("#name").val(""); }); $("ul").on("click", ".delete", function(e) { $(this).closest('li').remove(); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> <form id="formName" class="align-center p-3 mx-auto"> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">Name</label> <input type="text" class="form-control" id="name" aria-describedby="emailHelp" /> </div> <button id="submit" type="submit" value="Submit" class="btn btn-primary"> Submit </button> </form> <ul id="submittedName" class="align-center p-3 mx-auto"></ul>