Tengo una duda, tal vez porque soy nuevo en el trabajo de las interacciones con el DOM, pero cada vez que le das actualizar, el contenido nuevo creado con anterioridad desaparece, entonces de que me sirve usar esta metodología para crear contenido, si no va a quedar de forma permanente. Asumo que deberé recurrir al BackEnd para generar contenido nuevo permanente.
-
check_circle_outlineMódulo 1 | 4 clases
Introducción
expand_more -
check_circle_outlineMódulo 2 | 7 clases
Obtener Elementos
expand_more -
check_circle_outlineMódulo 3 | 2 clases
Atributos
expand_more -
check_circle_outlineMódulo 4 | 12 clases
Eventos
expand_more -
check_circle_outlineMódulo 5 | 3 clases
Modificar el DOM
expand_more -
check_circle_outlineMódulo 6 | 1 clases
Despedida del curso
expand_more
5 comentario(s)
Para los que tengan problemas con eliminar la card. En realidad hay que eliminar el div "thumbnail"
Dejo mi código que me funcionó luego de intentar diferentes cosas:
(quitar el let de la variable thumbnail dentro de la función create_card)
function delete_card(){
// console.log('borrado');
row.removeChild(thumbnail);
}
Hola Al parecer tengo algún erro que no logro identificar
la salida en la consola es la siguiente:
TypeError: Node.removeChild: Argument 1 is not an object.
y el código está así:
la salida en la consola es la siguiente:
TypeError: Node.removeChild: Argument 1 is not an object.
y el código está así:
function delete_card(e){ row.removeChild(get_ancestor(e.target, 4)); } function get_ancestor(ancestor, level){ console.log(ancestor, level); if(level==0){ console.log("el ancestro de retornar es: " + ancestor); return ancestor; } level--; get_ancestor(ancestor.parentElement, level); };
Al momento de eliminar me tira éste error en la consola
app.js:71 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
at HTMLParagraphElement.delete_card (app.js:71)
Éste el código que llevo haciendo:
// EVENTOS
const title = document.getElementById('title');
title.innerHTML = "Cursos";
const description = document.getElementById('description');
description.textContent = 'Listado de Cursos';
const items = document.querySelectorAll('li:nth-child(even)');
for (var i = 0; i < items.length; i++) {
let element = items[i];
element.style.background = '#f2f2f2';
}
// Variables para crear elementos
const row = document.querySelector('.row');
// Eventos SUBMIT
const form = document.getElementById('course-form');
form.addEventListener('submit', function(e){
e.preventDefault();
let title = document.getElementById('title-form').value;
let description = document.getElementById('description-form').value;
create_card(title, description);
});
let div = null;
// Funciones para crear elementos
function create_card(title, description) {
let div = document.createElement('div');
div.className = 'col-sm-6 col-md-4';
let thumbnail = document.createElement('div');
thumbnail.className = 'thumbnail';
let caption = document.createElement('div');
caption.className = 'caption';
let h3 = document.createElement('h3');
h3.textContent = title;
let p1 = document.createElement('p');
p1.textContent = description;
let p2 = document.createElement('p');
let a = document.createElement('a');
a.className = 'btn btn-danger';
a.textContent = 'Eliminar';
p2.addEventListener('click', delete_card);
// Elementos anidados hasta el div padre
p2.appendChild(a);
caption.appendChild(h3);
caption.appendChild(p1);
caption.appendChild(p2);
thumbnail.appendChild(caption);
div.appendChild(thumbnail);
row.appendChild(div);
};
function delete_card(){
row.removeChild(div);
}
// Forma recomendada si es poco código HTML
function create_card_by_innerHTML(title, description){
let html =`<div class="col-sm-6 col-md-4">\
<div class="thumbnail">\
<div class="caption">\
<h3 id="title_card"> ${title} </h3>\
<p id="description_card"> ${description} </p>\
<p><a href="#" class="btn btn-danger">Acción</a></p>\
</div>\
</div>\
</div>`
row.innerHTML += html;
}
app.js:71 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
at HTMLParagraphElement.delete_card (app.js:71)
Éste el código que llevo haciendo:
// EVENTOS
const title = document.getElementById('title');
title.innerHTML = "Cursos";
const description = document.getElementById('description');
description.textContent = 'Listado de Cursos';
const items = document.querySelectorAll('li:nth-child(even)');
for (var i = 0; i < items.length; i++) {
let element = items[i];
element.style.background = '#f2f2f2';
}
// Variables para crear elementos
const row = document.querySelector('.row');
// Eventos SUBMIT
const form = document.getElementById('course-form');
form.addEventListener('submit', function(e){
e.preventDefault();
let title = document.getElementById('title-form').value;
let description = document.getElementById('description-form').value;
create_card(title, description);
});
let div = null;
// Funciones para crear elementos
function create_card(title, description) {
let div = document.createElement('div');
div.className = 'col-sm-6 col-md-4';
let thumbnail = document.createElement('div');
thumbnail.className = 'thumbnail';
let caption = document.createElement('div');
caption.className = 'caption';
let h3 = document.createElement('h3');
h3.textContent = title;
let p1 = document.createElement('p');
p1.textContent = description;
let p2 = document.createElement('p');
let a = document.createElement('a');
a.className = 'btn btn-danger';
a.textContent = 'Eliminar';
p2.addEventListener('click', delete_card);
// Elementos anidados hasta el div padre
p2.appendChild(a);
caption.appendChild(h3);
caption.appendChild(p1);
caption.appendChild(p2);
thumbnail.appendChild(caption);
div.appendChild(thumbnail);
row.appendChild(div);
};
function delete_card(){
row.removeChild(div);
}
// Forma recomendada si es poco código HTML
function create_card_by_innerHTML(title, description){
let html =`<div class="col-sm-6 col-md-4">\
<div class="thumbnail">\
<div class="caption">\
<h3 id="title_card"> ${title} </h3>\
<p id="description_card"> ${description} </p>\
<p><a href="#" class="btn btn-danger">Acción</a></p>\
</div>\
</div>\
</div>`
row.innerHTML += html;
}
let p2 = document.createElement('p') let a = document.createElement('a') a.className = 'btn btn-danger' a.textContent = 'Eliminar' p2.addEventListener('click', () => { row.removeChild(div) })