Develop Reference

Clone contenteditable div without text

How can I clone a new row without also copying the text that has been inserted inside the contenteditable div? I want a new blank div to type into. Many thanks
<div id="wrapper">
<div id="row">
<div id="left">
<p><strong>Heading</strong></p>
<div contenteditable="true" data-placeholder="Type here...">
</div>
<div id="right">
<p><strong>Heading</strong></p>
<div contenteditable="true" data-placeholder="Type here...">
</div>
</div>
</div>
<button id="button" onlick="duplicate()">Add another row</button>
document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('row');
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "row" + ++i;
original.parentNode.appendChild(clone);
}

Recommendations
Do not assign #ids to anything that would be duplicated use .class and .querySelector(). It's actually a better practice not to use #id at all since it will become increasingly difficult to adapt your code in the future. There are exceptions when it is actually an advantage rather than a hinderance (ex. checkboxes/radiobuttons association with labels).
When handling events, do not use on event attributes -- instead, use on event properties or .addEventListener() to handle events such as "click". It appears that in the OP code on event attribute and property was used to handle the same click event.
<!-- Do not use this --> <button id="button" onlick="duplicate()">
<!-- Use this: listenerElement.onclick = duplicate
or this: listenerElement.addEventListener('click', duplicate)
-->
Add event handlers (ex. duplicate()) with on event property (ex. .onclick) or with .addEventListener() on a parent element of all elements that need an event handler. So instead of each button listening for a user to click it -- have div#wrapper (in example below it is main) listen for a user to click a button. It's strongly recommended that you familiarize yourself with event delegation.
Keeping what was previously mentioned in mind, the following example has:
all #ids replaced by .class.
the onclick="duplicate()" removed from button
the event handler (renamed addRow(e)) uses .insertAdjacentHTML() to render a template literal of section.row behind the section.row of the button.addRow that the user clicked. Details are commented in the example below
the event handler added to main in order to delegate click events for all buttons present when page has been loaded as well as any buttons added dynamically in the future
document.querySelector('main').onclick = addRow;
some CSS added and some minor changes to HTML for semantics and styling
Details are commented in the example below
Note: it wasn't clear whether it was one button or a button on every row. This example is designed for the latter. Please comment below if the former (a single button) is desired.
// Pass the Event Object
const addRow = event => {
// This is the tag user has clicked
const btn = event.target;
// This is the string that will be rendered
const tmp = `<section class="row"><div class="left part"><header>Heading</header><div contenteditable>Type here...</div></div><div class="right part"><header>Heading</header><div contenteditable>Type here...</div></div><button class="addRow">Add Row</button></section>`;
// This is the row of the tag user has clicked
let ref = btn.parentElement;
// if this tag has class .addRow...
if (btn.matches('.addRow')) {
/*
... render a string (tmp) after the
row of the clicked button (ref) into HTML
*/
ref.insertAdjacentHTML('afterEnd', tmp);
}
};
document.querySelector('main').onclick = addRow;
.row {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
}
.part {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
width: 42vw;
}
.right {
margin-left: 10px;
}
button {
display: block;
width: max-content;
margin-left: auto;
padding: 2px 4px;
}
<main>
<section class="row">
<div class="left part">
<header>Heading</header>
<div contenteditable>Type here...</div>
</div>
<div class="right part">
<header>Heading</header>
<div contenteditable>Type here...</div>
</div>
<button class='addRow'>Add Row</button>
</section>
</main>
The following example is designed with one button
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
main {
width: 100vw;
}
.box {
width: 80vw;
margin: 10px auto;
padding: 5px;
border: 2px solid black;
}
.row {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
}
.part {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
width: 36vw;
margin: 4px auto;
}
.right {
margin-left: 10px;
}
button {
display: block;
width: max-content;
margin: 4px 30px 4px auto;
padding: 2px 4px;
}
[data-ph]::before {
content: attr(data-ph)
}
</style>
</head>
<body>
<main>
<div class="box">
<section class="row">
<div class="left part">
<header>Heading</header>
<div data-ph='Type here...' contenteditable></div>
</div>
<div class="right part">
<header>Heading</header>
<div data-ph='Type here...' contenteditable></div>
</div>
</section>
</div>
<button class='addRow'>Add Row</button>
<div class="box">
<section class="row">
<div class="left part">
<header>Heading</header>
<div data-ph='Type here...' contenteditable></div>
</div>
<div class="right part">
<header>Heading</header>
<div data-ph='Type here...' contenteditable></div>
</div>
</section>
</div>
<button class='addRow'>Add Row</button>
</main>
<script>
const addRow = event => {
const btn = event.target;
const tmp = `<section class="row"><div class="left part"><header>Heading</header><div data-ph="Type here..." contenteditable></div></div><div class="right part"><header>Heading</header><div data-ph="Type here..." contenteditable></div></div></section>`;
let ref = btn.previousElementSibling;
if (btn.matches('.addRow')) {
ref.insertAdjacentHTML('beforeEnd', tmp);
}
};
document.querySelector('main').onclick = addRow;
</script>
</body>
</html>

You need to select the contenteditable elment and replace the html
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "row" + ++i;
clone.querySelector('div[contenteditable="true"]').innerHTML = '';
original.parentNode.appendChild(clone);
}
because you now said it is more than one, you need querySelectorAll
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "row" + ++i;
clone.querySelectorAll('div[contenteditable="true"]').forEach(function(elem) {
elem.innerHTML = '';
});
original.parentNode.appendChild(clone);
}

Use onclick in button to add a border to another div

Basically explained : click button A to add a border to card A, click button B to add a border to card B and remove border from card A etc. (these "cards" are also set up to be side scrolling so having the "highlighted card" scroll into view if it is out of view, so if you have any advice on how to do that too, I'm all ears)
This is what I have so far, but I keep getting an error that says the highlight function is not defined. I have it called on the button as onclick="highlight()"
function highlight() {
var item = document.getElementById('item-id')
var unhighlight = document.getElementsByClassName('item-class')
unhighlight.removeClass('border');
item.addClass('border');
}

Here's a simplified version that uses data attributes on the buttons and the divs to update the DOM.
Move your inline code to its own script.
Cache your elements.
Add an event listener to each button
Inside your highlight function: get the id from the button's data attribute, remove the borders from all the other divs, use the id to identify which div should now be highlighted, and then scroll it into view.
const buttons = document.querySelectorAll('button');
const items = document.querySelectorAll('div');
buttons.forEach(button => button.addEventListener('click', highlight, false));
function highlight(e) {
const button = e.target;
const id = button.dataset.id;
items.forEach(item => item.classList.remove('border'));
const div = document.querySelector(`div[data-id="${id}"]`);
div.classList.add('border');
div.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
}
#container { display: flex; flex-direction: row; }
div { padding: 1em; margin: 0.5em; width: 1500px; }
.border { border: 2px solid black; }
<button data-id="1">Click 1</button>
<button data-id="2">Click 2</button>
<button data-id="3">Click 3</button>
<div id="container">
<div data-id="1">Hallo 1</div>
<div data-id="2">Hallo 2</div>
<div data-id="3">Hallo 3</div>
</div>

Consider the following example.
$(function() {
$("button").click(function() {
var target = $(this).data("rel");
$(target).toggleClass("highlight");
});
});
.highlight {
border: 1px solid yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button-a" data-rel="#card-a">A</button>
<button id="button-b" data-rel="#card-b">B</button>
<button id="button-c" data-rel="#card-c">C</button>
<div id="card-a" class="card">
<div class="card-title">Card A</div>
</div>
<div id="card-b" class="card">
<div class="card-title">Card B</div>
</div>
<div id="card-c" class="card">
<div class="card-title">Card C</div>
</div>

Can I combine a list of #ID's into one single class?

I have 12 #ID's and want to add the same CSS to all of them.
I cannot add classes to these ID's.
So what I want to do is:
.class-grouped = #ID1, #ID2, #ID3
My code will be very messy if I have to write all 12 #ID's on all the styles.

You can try to add the class in JS:
var ids = ['ID1', 'ID2', 'ID3', 'ID4'];
ids.forEach(function(id) {
document.getElementById(id).classList.add('class-grouped');
});
.class-grouped { background: blue; margin-bottom: 5px; height: 10px; }
<div id="ID1"></div>
<div id="ID2"></div>
<div id="ID3"></div>
<div id="ID4"></div>

const elements = document.querySelectorAll("#a, #b, #c, #d");
elements.forEach(elem => elem.classList.add("myClass"));
<div id="a">23</div>
<div id="b">232</div>
<div id="c">434</div>
<div id="d">43242</div>

Javascript - show a button inside of a DIV when clicked (and hide all others)

I have a list of DIVS that have buttons inside. By default, all buttons are hidden. When I click within a DIV area, the current button inside of this clicked DIV are should show (class='.db') AND all previously clicked/shown buttons should be hidden (class='.dn'). In other words, at any time there should be only one button (currently clicked) shown and all other should be hidden.
I want to use vanilla Javascript and tried this below, but it won't work. I feel there is some small error but don't know where.. Note - the DIVS and buttons don't have their own unique IDs (they only have the same CSS (.posted) classes.
PS - maybe it'd be better not to add this onClick="t();" to each DIV and use an 'addEventListener' function, but this is way too much for me ; )
CSS:
.dn {display:none}
.db {display:block}
.posted {
height: 50px;
width: 100px;
background-color: green;
border: 2px solid red;
}
HTML:
<div class="posted" onClick="t();">
<button class="dn">Reply</button>
</div>
<div class="posted" onClick="t();">
<button class="dn">Reply</button>
</div>
<div class="posted" onClick="t();">
<button class="dn">Reply</button>
</div>
JAVASCRIPT:
function t()
{
var x=document.getElementsByClassName("posted"),i,y=document.getElementsByTagName("button");
for(i=0;i<x.length;i++)
{
x[i].y[0].className="dn";
};
x.y[0].className='db';//make sure the currently clicked DIV shows this button (?)
}

You might want to read more about selector, how to select class, block level etc.
some link might be helpful:
CSS selector:
https://www.w3schools.com/cssref/css_selectors.asp
jQuery selector:
https://api.jquery.com/category/selectors/
Solution - Using jQuery:
$('.posted').on('click', function() {
//find all class called posted with child called dn, then hide them all
$('.posted .dn').hide();
//find this clicked div, find a child called dn and show it
$(this).find('.dn').show();
});
.dn {
display: none
}
.db {
display: block
}
.posted {
height: 50px;
width: 100px;
background-color: green;
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="posted">
<button class="dn">Reply1</button>
</div>
<div class="posted">
<button class="dn">Reply2</button>
</div>
<div class="posted">
<button class="dn">Reply3</button>
</div>
Solution - Pure js version:
//get list of div block with class="posted"
var divlist = Array.prototype.slice.call(document.getElementsByClassName('posted'));
//for each div
divlist.forEach(function(item) {
//add click event for this div
item.addEventListener("click", function() {
//hide all button first
divlist.forEach(function(el) {
el.getElementsByTagName('button')[0].classList.add('dn');
});
//show button of the div clicked
this.getElementsByTagName('button')[0].classList.remove('dn');
}, false);
});
.dn {
display: none
}
.db {
display: block
}
.posted {
height: 50px;
width: 100px;
background-color: green;
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="posted">
<button class="dn">Reply1</button>
</div>
<div class="posted">
<button class="dn">Reply2</button>
</div>
<div class="posted">
<button class="dn">Reply3</button>
</div>

You can do this with with plain JavaScript using Event Bubbling, querySelector and the element classList attribute like this.
Change your HTML to look like this:
<div class="posts">
<div class="posted">
<button class="dn">Reply</button>
</div>
<div class="posted" >
<button class="dn">Reply</button>
</div>
<div class="posted" >
<button class="dn">Reply</button>
</div>
</div>
Then use JavaScript like this:
var posts = document.querySelector('.posts');
var allPosted = document.querySelectorAll('.posted');
//clicks bubble up into the posts DIV
posts.addEventListener('click', function(evt){
var divClickedIn = evt.target;
//hide all the buttons
allPosted.forEach(function(posted){
var postedBtn = posted.querySelector('button');
postedBtn.classList.remove('db');
});
// show the button in the clicked DIV
divClickedIn.querySelector('button').classList.add('db')
});
You can find a working example here: http://output.jsbin.com/saroyit

Here is very simple example using jQuery .siblings method:
$(function () {
$('.posted').click(function () {
$('button', this).show();
$(this).siblings().find('button').hide();
});
});
https://jsfiddle.net/3tg6o1q7/

Event handler for loop with dynamic jQuery selectors

What I want is to click on #bt-1 and change the color of #target-1, click on #bt-2 and change the color of #target-2...
I started writing a particular click event handler for each #bt-n / #target-n but as the site got bigger I thought about using a loop. My approach was using a for loop with variables in jQuery selectors. Here is my code:
$(document).ready(function() {
var total = $('.target').length;
for(n=1; n<=total; n++) {
var num = String(n);
$('#bt-'+num).on('click', function() {
$('#target-'+num).toggleClass('yellow');
});
}
});
.wrapper {
display: flex;
text-align: center;
}
.button, .target {
padding: 20px;
margin: 10px;
}
.button {
background: gray;
}
#target-1 {
background: red;
}
#target-2 {
background: green;
}
#target-3 {
background: blue;
}
.yellow {
background: yellow !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="bt-1" class="button">
<h1>Button 1</h1>
</div>
<div id="target-1" class="target">
<h1>Target 1</h1>
</div>
</div>
<div class="wrapper">
<div id="bt-2" class="button">
<h1>Button 2</h1>
</div>
<div id="target-2" class="target">
<h1>Target 2</h1>
</div>
</div>
<div class="wrapper">
<div id="bt-3" class="button">
<h1>Button 3</h1>
</div>
<div id="target-3" class="target">
<h1>Target 3</h1>
</div>
</div>
I don't understand why it only targets the last #target-n as the loop seems to be working on #bt-n. I also thought about using an array but can't figure out how to implement it.
I managed to make it work using $(this).siblings('.target')... which do not require the for loop and ids but a parent element for each .button / .target, in this case .wrapper Code Here. Although this was a good solution, I would like to understand what I did wrong and how to properly implement a loop to achieve this without using the parent .wrapper. Thank you.

The reason that only the last item gets affected is because the loop has completed before any event fires. Therefore n holds the last value in the loop. To fix this you need to use a closure:
for (n = 1; n <= total; n++) {
(function(n) {
$('#bt-' + n).on('click', function() {
$('#target-' + n).toggleClass('yellow');
});
})(n);
}
That said, a much better approach would be avoid the loop and to use DOM traversal to find the .target related to the clicked .button, like this:
$('.button').click(function() {
$(this).next('.target').toggleClass('yellow');
});
.wrapper {
display: flex;
text-align: center;
}
.button,
.target {
padding: 20px;
margin: 10px;
}
.button {
background: gray;
}
#target-1 {
background: red;
}
#target-2 {
background: green;
}
#target-3 {
background: blue;
}
.yellow {
background: yellow !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="bt-1" class="button">
<h1>Button 1</h1>
</div>
<div id="target-1" class="target">
<h1>Target 1</h1>
</div>
</div>
<div class="wrapper">
<div id="bt-2" class="button">
<h1>Button 2</h1>
</div>
<div id="target-2" class="target">
<h1>Target 2</h1>
</div>
</div>
<div class="wrapper">
<div id="bt-3" class="button">
<h1>Button 3</h1>
</div>
<div id="target-3" class="target">
<h1>Target 3</h1>
</div>
</div>

It is unwise to register a lot of event handlers. You can bind one event handler and perform action for given specific idx read from element id, eg:
$('body').on('click', function (event) {
if (!event.target.id.match(/^bt-\d+/)) {
return; //id of clicked element does not match bt-{number}
}
var idx = event.target.id.replace('bt-', ''); //remove prefix "bt-" and leave only numeric postfix
$('#target-' + idx).toggleClass('yellow');
});
Explanation:
When you bind click on body element You are getting access to all click events from child elements that not cancelled passing that event up. Element that has been clicked in saved inside event.target and it has property id in event.target.id.
On this id property I call match function with regular expression - it will match string which starts ^ from bt- and have any number \d at least one one + .
if (!event.target.id.match(/^bt-\d+/)) {
return; //id of clicked element does not match bt-{number}
}
There is negation of this statement, so If this id is not in format bt-someNumber it will not go further.
var idx = event.target.id.replace('bt-', '');
Than takes id and replaces bt- part in it with empty string ''
$('#target-' + idx).toggleClass('yellow');
Finally You are toggling class on element with same number as button but with different prefix target- instead of bt-.
Happy hacking!