Crear y borrar contenido dinamico

Developer
MoyArt Maximus
Size
2,336 Kb
Views
56,672
  1. Crear y borrar contenido dinamico Previews
  2. Crear y borrar contenido dinamico HTML Codes
  3. Crear y borrar contenido dinamico CSS Codes
  4. Crear y borrar contenido dinamico JS Codes

How do I make an crear y borrar contenido dinamico?

What is a crear y borrar contenido dinamico? How do you make a crear y borrar contenido dinamico? This script and codes were developed by MoyArt Maximus on 09 July 2022, Saturday.

Crear y borrar contenido dinamico Previews
IQ Test

Crear y borrar contenido dinamico - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Crear y borrar contenido dinamico</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="mainContent"> <div class="contenedorBeneficiarios"> <div class="contenedor clearFix"> <h2>Indica tus beneficiarios</h2> <a href="javascript:void(0)" class="addBeneficiario">+</a> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Crear y borrar contenido dinamico - Script Codes CSS Codes

body{ font-family: sans-serif;
}
.clearFix::after { content:""; display:table; clear:both;
}
.rojo{ color: #600;
}
.contenedorBeneficiarios h2{ width: 320px; padding: 0; margin: 10px 20px; float: left;
}
.addBeneficiario{ display: block; width: 40px; height: 40px; font-size: 2rem; color: #002; text-align: center; line-height: 40px; text-decoration: none; border: 3px solid #000022; border-radius: 50%; float: left;
}
.blanco{ color: #fff;
}
.contenedorAbuget{ border-bottom: 3px solid #600; margin: 20px 0;
}
.contenedorAbuget h1{ display: block; width: 300px; float: left; text-transform: uppercase;
}
.contenedorAbuget h1 span{ background-color: #550000; width: 30px; height: 30px; display: block; text-align: center; padding: 5px; border-radius: 0% 50% 50% 0%; color: #fff; float: right;
}
.close{ background-color: #fff; padding: 10px; margin-top: 15px; margin-right: 15px; text-decoration: none; display: block; float: right; font-weight: bold; font-size: 20px; color: #600; width: 20px; height: 20px; text-align: center; border: 3px solid #600; border-radius: 50%;
}

Crear y borrar contenido dinamico - Script Codes JS Codes

var beneficiarios = [];
$(".addBeneficiario").click(function(){ if(beneficiarios.length <= 3){ $(this).toggleClass("rojo"); beneficiarios.push("Abuuuuget "+beneficiarios.length); $(".contenedorBeneficiarios").append('<div class="contenedorAbuget clearFix"><h1>Abuuuuuget!! <span>' + beneficiarios.length + '</span> </h1><a href="javascript:void(0)" class="close">X</a></div>'); $(".close").click(function(){ console.log("Detachuuuuget!!") beneficiarios.pop() $(".contenedorAbuget").last().remove(); }); };
})
Crear y borrar contenido dinamico - Script Codes
Crear y borrar contenido dinamico - Script Codes
Home Page Home
Developer MoyArt Maximus
Username MoyArt
Uploaded July 09, 2022
Rating 3
Size 2,336 Kb
Views 56,672
Do you need developer help for Crear y borrar contenido dinamico?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

MoyArt Maximus (MoyArt) Script Codes
Name
Module Pattern
Arrays
Portafolio
Formularios html
CSS Radio Button
Cookies
Todo List
A Pen by MoyArt Maximus
Especificidad
Using Flickr API
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!