Este canal merece ter mais de 1 milhão de inscritos. Queria que quando eu era mais novo tivesse uma iniciativa como esta, pois hoje só não estuda quem não quer.
Aula Maravilhosa, eu fiz assim criei o icone da lixeira e fiz o css pelo javaScript mesmo para Praticar ↓ const btn_lixeira = document.createElement("img"); btn_lixeira.setAttribute("src", "./lixeira.png"); btn_lixeira.style.width = "25px"; btn_lixeira.style.cursor = "pointer"; novoElemento.appendChild(btn_lixeira); btn_lixeira.addEventListener("click", (evt) => { caixa1.removeChild(evt.target.parentNode); });
Top demais a aula, sobre a solução para remover uma div atráves do ícone da lixeira, fiz da seguinte forma: //ao clicar no ícone da lixeira, excluir o elemento btn_lixeira.addEventListener('click', (evt)=>{ novoElemento.remove(evt.target); }) Apenas removi o novoElemnto(div) ao clicar em btn_lixeira.
Pra resolver esse desalinhamento ai é só usar o space between no lugar de spacearound. O desalinhamento é por que o spacearound soma os espaços entre as divs junto ao espaçaento. space between não soma, só joga pro lado igual. bjs abraços
Aula muito boa! Acho que para deixar as lixeiras alinhadas, daria pra utilizar um 'justify-content: space-between;' e adicionando um padding pequeno nas divs
o map( ) é o loop que percorre o array de cursos. Então para cada elemento do array cursos ele vai repetir os comandos de atributos. por isso precisa estar dentro do loop map( ). espero ter ajudado!
Se você utilizar o removeChild em novo elemento , nesse contexto , você excluirá somente a lixeira pois é ela que é filha de novoelemento . btn_lixeira.addEventListener("click", (evt) => { console.log(evt.target , chave); novoElemento.remove(evt.target); }); fiz assim e deu certo .
Sei que a proposta do vídeo é usar o removeChild. Mas eu consegui usando só o remove também: (PS: As minhas divs ao invés de cursos são nomes :) ) const btn = [...document.querySelectorAll(".nome")]; const lixeiras = [...document.querySelectorAll(".lixeira")]; lixeiras.map((el,i) => { el.addEventListener("click", (evt) =>{ btn[i].remove(); }) })
É normal para vcs conseguirem fazer sem olhar e alguns dias depois esquecer como faz? tipo, até entendo já vendo depois de montado, consigo fazer depois sem olhar, mas depois de alguns dias, n lembro mais como fazer de minha cabeça.
Hoje em dia só não programa quem não quer, o acesso aos cursos é vasto e gratuito ao contrário da minha época que precisava pagar um suado dinheiro na faculdade pra aprender nem 1 décimo do que tem hoje de graça
DESAFIO P VCS: COLOQUEM PRA IMPRIMIR O ELEMENTO QE FOI REMOVIDO NO CONSOLE. DICA: NAO USEM INNERHTML, USEM textContent RESOLUÇÃ OD PROBLEMA: console.log(event.target.parentNode.textContent + ' removed')
Outra maneira que preferi fazer foi removendo o elemento pai de btn_lixeira. Pode usar parentElement ou parentNode, seguido de remove() btn_lixeira.addEventListener("click",(evt)=>{ btn_lixeira.parentElement.remove() })
Professor, boa noite. Cara, eu fiz de uma forma que testei ao pensar qual seria o método correto para excluir o elemento pai, pois pensei que se o elemento gerado pelo "map" é o pai direto da "img", então testei tal método: mainContainer.removeChild(mainContainer.children[novoElement.id]) - mainContainer é a constante que criei para receber as propriedades de "caixa'1". Poderia me dizer se tal forma que fiz para atender o recurso de excluir tem algum problema em ser usado ou também é uma forma super válida? Obrigado pela atenção.
Este canal merece ter mais de 1 milhão de inscritos. Queria que quando eu era mais novo tivesse uma iniciativa como esta, pois hoje só não estuda quem não quer.
me salvando demais nos estudos de javasript o melhor curso gratuito do youtube em portugues
Feliz dia dos professores, mestre!!!!! Obrigada pelo conteúdo de qualidade.
Muito Obrigadoooooo
Parabéns Mestre Bruno. Seu curso é incrível, altissímo nível. Tenho aprendido bastante com o senhor. Você tem o dom de ensinar.😃
Só passando pra deixar mais um comentário...
Aula Maravilhosa, eu fiz assim criei o icone da lixeira e fiz o css pelo javaScript mesmo para Praticar ↓
const btn_lixeira = document.createElement("img");
btn_lixeira.setAttribute("src", "./lixeira.png");
btn_lixeira.style.width = "25px";
btn_lixeira.style.cursor = "pointer";
novoElemento.appendChild(btn_lixeira);
btn_lixeira.addEventListener("click", (evt) => {
caixa1.removeChild(evt.target.parentNode);
});
Top demais a aula, sobre a solução para remover uma div atráves do ícone da lixeira, fiz da seguinte forma: //ao clicar no ícone da lixeira, excluir o elemento
btn_lixeira.addEventListener('click', (evt)=>{
novoElemento.remove(evt.target);
}) Apenas removi o novoElemnto(div) ao clicar em btn_lixeira.
Um simples justify-content: space-between já ajustava os icones.. :) muito bom!
OBRIGADOOOOOOOOOO DEUS TE ABENÇOE
Obrigado pela aula e pelo vídeo!
Pra resolver esse desalinhamento ai é só usar o space between no lugar de spacearound. O desalinhamento é por que o spacearound soma os espaços entre as divs junto ao espaçaento. space between não soma, só joga pro lado igual. bjs abraços
TOP DEMAIS !
MUITOOOO BOM
estou aprendendo muito com seus cursos. agradeço por tudo!
Bom dia obgda valeu. Obgda
Aula muito boa! Acho que para deixar as lixeiras alinhadas, daria pra utilizar um 'justify-content: space-between;' e adicionando um padding pequeno nas divs
Na moral, esse professor, esse conteúdo, essa didática... o cara fod@, parabéns professor, a cada aula me surpreendo com o que o JS pode fazer
Gostei bastante dessa aula, showwwwwwwwwwww
qua aula insana professor minha cabeça explodiu !!
Obrigado pela aula. Eu fiquei com dificuldade de entender porque todos esses comandos têm que ficar dentro de um MAP.
o map( ) é o loop que percorre o array de cursos. Então para cada elemento do array cursos ele vai repetir os comandos de atributos. por isso precisa estar dentro do loop map( ). espero ter ajudado!
Excelente aula!
Parabéns pelo conteúdo de qualidade.
Curso top demais
Otimo curso, didática excelente!!
Parabéns professor. Aula top. 👍
Excelente aula, obrigado!
Muito bom professor, mais uma obra de arte. Parabéns.✍
Eu acabei usando o elemento novo, em si dentro do addEventListener, funcionou igualmente.
Eu usei o removeChild no novoElementoe tbm deu certo
Se você utilizar o removeChild em novo elemento , nesse contexto , você excluirá somente a lixeira pois é ela que é filha de novoelemento . btn_lixeira.addEventListener("click", (evt) => {
console.log(evt.target , chave);
novoElemento.remove(evt.target);
}); fiz assim e deu certo .
Bela explicação , show de bola!!
Sei que a proposta do vídeo é usar o removeChild. Mas eu consegui usando só o remove também:
(PS: As minhas divs ao invés de cursos são nomes :) )
const btn = [...document.querySelectorAll(".nome")];
const lixeiras = [...document.querySelectorAll(".lixeira")];
lixeiras.map((el,i) => {
el.addEventListener("click", (evt) =>{
btn[i].remove();
})
})
1:17 o código foi adicionado antes do appendChild(), a ordem tem algum sentido? pq eu coloquei o mesmo códio após o appendChild() e funcionou
like
É normal para vcs conseguirem fazer sem olhar e alguns dias depois esquecer como faz? tipo, até entendo já vendo depois de montado, consigo fazer depois sem olhar, mas depois de alguns dias, n lembro mais como fazer de minha cabeça.
Sim, eu constantemente retorno aos vídeos para observar um detalhe que passou desapercebido
no mundo do ti, você tem que tar sempre praticando pra não esquecer, logico que não ira lembrar de tudo, mas requer sua pratica diária e constante
eu to com problemas na hora de colocar a imagem
Hoje em dia só não programa quem não quer, o acesso aos cursos é vasto e gratuito ao contrário da minha época que precisava pagar um suado dinheiro na faculdade pra aprender nem 1 décimo do que tem hoje de graça
DESAFIO P VCS:
COLOQUEM PRA IMPRIMIR O ELEMENTO QE FOI REMOVIDO NO CONSOLE.
DICA: NAO USEM INNERHTML, USEM textContent
RESOLUÇÃ OD PROBLEMA:
console.log(event.target.parentNode.textContent + ' removed')
Outra maneira que preferi fazer foi removendo o elemento pai de btn_lixeira. Pode usar parentElement ou parentNode, seguido de remove()
btn_lixeira.addEventListener("click",(evt)=>{
btn_lixeira.parentElement.remove()
})
Professor, boa noite.
Cara, eu fiz de uma forma que testei ao pensar qual seria o método correto para excluir o elemento pai, pois pensei que se o elemento gerado pelo "map" é o pai direto da "img", então testei tal método: mainContainer.removeChild(mainContainer.children[novoElement.id]) - mainContainer é a constante que criei para receber as propriedades de "caixa'1".
Poderia me dizer se tal forma que fiz para atender o recurso de excluir tem algum problema em ser usado ou também é uma forma super válida?
Obrigado pela atenção.