javascript - primer - quitar elemento html

Cómo eliminar el elemento padre usando jQuery

Question

Tengo algunas etiquetas de elementos de lista en mi jsp. Cada elemento de la lista tiene algunos elementos en su interior, incluido un enlace (etiqueta "a") llamado eliminar. Todo lo que quiero es eliminar todo el elemento de la lista cuando hago clic en el enlace.

Aquí está la estructura de mi código:

$("a").click(function(event) {
  event.preventDefault();
  $(this).parent(''.li'').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="191" class="li">
  <div class="text">Some text</div>
  <h4><a href="URL">Text</a></h4>
  <div class="details">
    <img src="URL_image.jpg">
    <span class="author">Some info</span>
    <div class="info"> Text
      <div class="msg-modification" display="inline" align="right">
        <a name="delete" id="191" href="#">Delete</a>
      </div>
    </div>
  </div>
</li>

Pero esto no funciona. Soy nuevo en jQuery, así que probé algunas cosas, como por ejemplo:

$(this).remove();

Esto funciona, elimina el enlace cuando se hace clic.

$("#221").remove();

Esto funciona, elimina el elemento de lista indicado, pero no es "dinámico".

¿Puede alguien darme un consejo?

Answer 1

¿qué hay de usar unwrap()

<div class="parent">
<p class="child">
</p>
</div>

después de usar - $(".child").unwrap() - será;

<p class="child">
</p>

Answer 2

Eliminar padre:

$(document).on("click", ".remove", function() {
       $(this).parent().remove(); 
});

Eliminar todos los padres:

$(document).on("click", ".remove", function() { 
       $(this).parents().remove();
});

Answer 3

Simplemente use el método .closest() : $(this).closest(''.li'').remove();
Comienza con el elemento actual y luego sube la cadena buscando un elemento coincidente y se detiene tan pronto como encuentra uno.

.parent() solo accede al padre directo del elemento, es decir, div.msg-modification que no coincide con .li . Por lo tanto, nunca llega al elemento que está buscando.

Otra solución además de .closest() (que verifica el elemento actual y luego sube la cadena) usaría .parents() - sin embargo, esto tendría la advertencia de que no se detiene tan pronto como encuentre un elemento coincidente (y no verifica el elemento actual, sino solo los elementos principales). En su caso, realmente no importa, pero para lo que está tratando de hacer .closest() es el método más apropiado.

Otra cosa importante:

NUNCA use la misma ID para más de un elemento. No está permitido y causa problemas muy difíciles de solucionar. Elimine la id="191" del enlace y, si necesita acceder a la identificación en el controlador de clic, use $(this).closest(''.li'').attr(''id'') . En realidad, sería aún más claro si utilizó data-id="123" y luego .data(''id'') lugar de .attr(''id'') para acceder a él (por lo que su ID de elemento no necesita parecerse a la ID (¿base de datos?) tiene)

Answer 4

Use los parents() lugar del parent() :

$("a").click(function(event) {
  event.preventDefault();
  $(this).parents(''.li'').remove();
});

Answer 5

$(''#'' + catId).parent().remove(''.subcatBtns'');