<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Sustituir & Eliminar Elementos Del DOM</title>
</head>
<style>
.titulo {
color: blue;
font-size: 1.5em;
text-align: center;
}
.labels {
color: blue;
font-size: 1.6em;
}
.forms {
color: green;
font-size: 1.5em;
}
.inputs {
color: red;
font-size: 1.5em;
}
.fieldset {
width: 24%;
height: 29%;
}
</style>
<body>
<p id="titulo" class="titulo">SUSTITUYE & ELIMINA ELEMENTOS DEL DOM</p>
<p class="labels"><img src="https://premiumcreditbureau.com/wp-content/uploads/2017/02/service-agreement-2.png" width="20" height="20">
Formulario De Registro</p>
<form action="" name="form">
<label for="nombre" class="forms">Nombre Completo. </label>
<input type="text" name="nombre" class="inputs" size="45"><br>
<label for="apellido" class="forms">Apellido Del Usuario. </label>
<input type="text" name="apellido" class="inputs" size="41.5"><br>
<label for="telefono" class="forms">Número De Telefono. </label>
<input type="number" name="telefono" class="inputs" size="45"><br>
<label for="curp" class="forms">Curp Del Usuario. </label>
<input type="text" name="curp" class="inputs" size="45"><br>
</form>
<form action="" name="radio">
<fieldset class="fieldset">
<p id="parrafo">Nivel De Estudio</p>
<label for="primaria"><input type="radio" value="primaria">Primaria</label><br>
<label for="secundaria"><input type="radio" value="secundaria">Secundaria</label><br>
<label for="preparatoria"><input type="radio" value="preparatoria">Preparatoria</label><br>
<label for="universidad"><input type="radio" value="universidad">Universidad</label><br>
</fieldset>
<br>
<label for="genero" id="labelGenero">Genero Del Usuario</label><br>
<select name="genero" id="genero">
<option value="Indistinto">Indistinto:</option>
<option value="Elegir" selected>Elegir:</option>
<option value="Femenino">Femenino</option>
<option value="Masculino">Masculino</option>
</select>
</form>
<form action="" name="botones">
<table>
<tr>
<tr><input type="button" id="A1" value="A1 Eliminar Apellido"></td>
<tr><input type="button" id="A2" value="A2 Sustituir Parrafo"></td>
<tr><input type="button" id="A3" value="A3 Eliminar Opción"></td>
</tr>
<tr>
<td><input type="button" id="A4" value="A4 Información Alumno"></td>
<td><input type="button" id="A5" value="A5 Sustituir Imagen"></td>
<td><input type="button" id="A6" value="A6 Eliminar Botón A6"></td>
</tr>
</table>
</form>
<script>
// RESUELVE LAS SIGUIENTES ACTIVIDADES QUE SE INDICAN A CONTINUACIÓN, EMPLEA FUNCIONES PARA SU ACTIVACIÓN ASOCIADAS
// A BOTONES DE ACCIÓN, PUEDES UTILIZAR EL CÓDIGO QUE YA SE ENCUENTRA AGREGADO PARA SU IMPLEMENTACIÓN, Y RECUERDA
// TODO LO DEBES REALIZAR MEDIANTE JAVASCRIPT Y NO DEBES TOCAR EL CODIGO HTML, NI ESTILOS DIRECTAMENTE.
/*
// SI LO REQUIERES PUEDES UTILIZAR LOS SIGUIENTES METODOS
// NOTA: ESTO ES OPCIONAL YA QUE EL EJERCICIO SE PUEDE RESOLVER SIN UTILIZARLOS A EXEPCION DE ".PARENTNODE" QUE
// YA SE HA UTILIZADO EN OTRAS OCACIONES.
Navegar Entre Elementos
--> -elemento.parentNode
Permite acceder al padre de un nodo. Es útil para eliminar nodos.
--> .elemento.firstElementChild
Para acceder al primer hijo.
--> .elemento.lastElementChild
Para acceder al último hijo.
--> .elemento.nextElementSibling
Para acceder al siguiente hermano con misma jerarquia. Por ejemplo útil en una lista.
--> .elemento.previousElementSibling
Para acceder al hermano anterior con misma jerarquia.
--> .elemento.childNodes.
Devuelve un array con todos los hijos.
*/
// Ejecuta La Funciòn inicio() Cuando Se Ha Cargado Completamente La Ventana Del Navegador
window.addEventListener("load", inicio);
function inicio(){
// Espera Un Click En El Botón Con El ID Especificado, Para Ejecutar La función limpiar() O Aceptar Dependiendo El Click
document.getElementById("A1").addEventListener("click",eliminarApellido);
// Continua Asociando Las Funciones Con Su Respectivo Botón Para Su Accionar, Como En La Linea De Arriba...
}
// A1 ELIMINA EL LABEL & INPUT CORRESPONDIENTES AL APELLIDO DEL USUARIO.
function eliminarApellido() {
}
// A2 SUSTITUIR EL ELEMENTO <P> DEL FORMULARIO DE NOMBRE RADIO, POR LA ETIQUETA <LEGEND> CON EL MISMO TEXTO
// A3 ELIMINAR LA OPCIÓN 'INDISTINTO' DEL SELECT DEL FORMULARIO RADIO
// A4 AGREGA TU INFORMACIÓN PERSONAL AL FORMULARIO, AL PRESIONAR EL BOTON DE ESTA ACTIVIDAD, RECUERDA LA ACTIVACIÓN
// DE LOS DEMAS BOTONOS NO DEBE INTERFERIR CON EL RESULTADO, ASÍ QUE COMPRUEBA SI EL ELEMENTO EXISTE, PARA LLENAR EL FORMULARIO
// CORRECTAMENTE ANTES Y DESPUES DE ACCIONAR EL BOTON A1 QUE ELIMINARA EL INPUT APELLIDO Y ESTO NO DEBE AFECTAR QUE EN AMBOS
// CASOS LA INFORMACIÒN SE LLENE ADECUADAMENTE
// PARA IDENTIFICAR SI UN ELEMENTO EXISTE EN EL DOC HTML ANALIZA ESTE ARTICULO
// https://desarrollo-geek.net/tutoriales/javascript/comprobar-si-un-elemento-existe-javascript/
// Importante: Para Cambiar La Opción De Un Select Debes Utilizar: opcionesArray[].select = 'true'
// Importante: Para Marcar La Opción De Un Radio Button Se Utiliza: radiosArrat[].checked ='true'
// A5 Sustituye La Imagen En El Body Por Un Nuevo Elemento Imagen, Que Deberas Crear Con Las Sigientes Especificaciones.
// IMG Propiedades -->
// src="https://i.ya-webdesign.com/images/transparent-check-wrong.png", width="20, height="20"
// A6 Eliminar El Ultimo Boton Despues De Ser Pulsado Y Mustra Un Alerta Indicando Que El Programa Funciona Correctamente
</script>
</body>
</html>
Grcias por su ayuda de antemano y espero no molestarlos mucho
¿Y la duda cual es?
(No se puede continuar esta discusión porque tiene más de dos meses de antigüedad. Si tienes dudas parecidas, abre un nuevo hilo.)