Método jQuery remove()

Sheeraz Gul 15 febrero 2024

jQuery jQuery Remove

Método jQuery remove()
Método jQuery empty()

El método remove() elimina elementos del DOM en jQuery. De manera similar, el método empty() elimina solo los elementos secundarios del elemento seleccionado en el DOM.

Este tutorial demuestra cómo usar los métodos remove y empty en jQuery.

Método jQuery `remove()`

El método remove() puede eliminar elementos seleccionados del DOM. El método eliminará los elementos seleccionados y todo lo que esté dentro del elemento.

La sintaxis de este método se encuentra a continuación.

$(selector).remove(selector)

Donde selector es un parámetro opcional que especifica si eliminar uno o más elementos, si hay más de un elemento para eliminar, podemos separarlos con una coma. Probemos un ejemplo para el método remove().

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#RemoveDiv").remove();
            });
        });
    </script>
</head>
<body>

    <div id="RemoveDiv" style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">

        <h1> This Div Will be Removed </h1>
        <p>Paragraph one in the Div.</p>
        <p>Paragraph two in the Div.</p>

    </div>
    <br>
    <div style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">

        <h1> This Div Will not be Removed </h1>
        <p>Paragraph one in the Div.</p>
        <p>Paragraph two in the Div.</p>

    </div>
    <button>Remove Div</button>

</body>
</html>

El código anterior eliminará el div seleccionado y sus elementos secundarios. Ver salida:

Método jQuery Remove

Como podemos ver, el método remove() elimina todos los elementos dentro de los elementos seleccionados. Otro método, empty(), elimina solo los elementos secundarios.

Método jQuery `empty()`

El método empty() puede eliminar todos los elementos secundarios del elemento seleccionado. También elimina el contenido dentro de los elementos secundarios.

La sintaxis para el método empty() se encuentra a continuación.

$('selector').empty();

Donde selector puede ser el id, la clase o el nombre del elemento, probemos un ejemplo para el método empty.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#RemoveDiv").empty();
            });
        });
    </script>
</head>
<body>

    <div id="RemoveDiv" style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">
        Hello this is the div content
        <h1> This Div Content Will be Removed </h1>
        <p>Paragraph one in the Div.</p>
        <p>Paragraph two in the Div.</p>

    </div>
    <br>
    <div style="height:200px; width:300px; border:1px solid black; background-color:lightblue;">

        <h1> This Div Content Will not be Removed </h1>
        <p>Paragraph one in the Div.</p>
        <p>Paragraph two in the Div.</p>

    </div>
    <button>Remove Div</button>

</body>
</html>

El código anterior eliminará solo el contenido secundario del div, no el div en sí. Ver salida:

Método jQuery Empty

Autor: Sheeraz Gul

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook

Método jQuery remove()

Método jQuery empty()

Método jQuery `remove()`

Método jQuery `empty()`