We Keep Coding

How to remove highlighted multiple html contenteditable elements?

How can I highlight multiple HTML elements and remove them by pressing the Backspace key? WordPress block editor and Editor.js has this feature. Users can select/ Highlight multiple block and remove them by pressing the Backspace key.
From this code below, If I highlight by selecting(mouse) not by clicking the .block-1, .block-2, .block-3 and press Backspace key then it should delete these elements.
[NOTE]
Every block should have contenteditable attribute.
Please, go to Editor.js first for demo what I exact want.
<div class="block-1" contenteditable="true"> 1st Block </div>
<div class="block-2" contenteditable="true"> 2nd Block </div>
<div class="block-3" contenteditable="true"> 3rd Block </div>
<div class="block-4" contenteditable="true"> 4th Block </div>

We need 2 listeners:
1 - on mouseup, which catches selected text, and use TreeWalker to get all the highlighted elements and toggle selected class on .blocks.
2 - on keyup, which will catch backspace
Edit:
Used This and improved the answer .
$(document).on({
'keyup': function(e) {
if (e.which == 8)
$('div.block.selected').remove();
},
'mouseup': getSelectedElementTags
});
function rangeIntersectsNode(range, node) {
var nodeRange;
if (range.intersectsNode) {
return range.intersectsNode(node);
} else {
nodeRange = node.ownerDocument.createRange();
try {
nodeRange.selectNode(node);
} catch (e) {
nodeRange.selectNodeContents(node);
}
return range.compareBoundaryPoints(Range.END_TO_START, nodeRange) == -1 &&
range.compareBoundaryPoints(Range.START_TO_END, nodeRange) == 1;
}
}
function getSelectedElementTags() {
var win = window;
var range, sel, elmlist, treeWalker, containerElement;
sel = win.getSelection();
if (sel.toString().length == 0) return
if (sel.rangeCount > 0) {
range = sel.getRangeAt(0);
}
if (range) {
containerElement = range.commonAncestorContainer;
if (containerElement.nodeType != 1) {
containerElement = containerElement.parentNode;
}
treeWalker = win.document.createTreeWalker(
containerElement,
NodeFilter.SHOW_ELEMENT,
function(node) {
return rangeIntersectsNode(range, node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
},
false
);
elmlist = [treeWalker.currentNode];
while (treeWalker.nextNode()) {
elmlist.push(treeWalker.currentNode);
}
elmlist.forEach(function(e) {
if ($(e).hasClass('block')) {
$(e).toggleClass('selected');
}
});
sel.empty()
}
}
div.block.selected {
background-color: #ddf;
}
div.block {
margin: 24px;
border-bottom: 1px solid #ddd;
font-size: 13px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" contenteditable="true">
<div class="block block-1" contenteditable="true"> 1st Block</div>
<div class="block block-2" contenteditable="true"> 2nd Block </div>
<div class="block block-3" contenteditable="true"> 3rd Block</div>
<div class="block block-4"> 4th Block </div>
</div>

The CSS and the contenteditable attribute are not necessary. Here is the code
var targeted;
document.getElementById('container').addEventListener('click', function(event) {
console.log(event.target); // You can see here the targeted element
if(event.target.id !== 'container') {
targeted = event.target;
} else {
targeted = undefined;
};
});
document.addEventListener('keydown', function(event) {
if(event.keyCode === 8 && targeted) {
targeted.parentNode.removeChild(targeted);
};
});
#container {
padding: 20px;
background-color: black;
}
#container div {
margin-bottom: 5px;
height: 50px;
width: 200px;
background-color: white;
}
<div id="container">
<div contenteditable="true">1</div>
<div contenteditable="true">2</div>
<div contenteditable="true">3</div>
<div contenteditable="true">4</div>
<div contenteditable="true">5</div>
</div>

How 2 to merge two functions in JavaScript for same div

The below code is working fine, but i want merge checked and click functions in single function. Is it possible?
$(function () {
if($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
});
$(function () {
$("#enablepromo0").click(function () {
if ($(this).is(":checked")) {
$("#PromoPanel").show(300);
} else {
$("#PromoPanel").hide(300);
}
});
});

Use the change event and trigger it, it can then detect the current state of the checkbox. I altered the code to toggle a class instead to avoid a "flash" initially.
$(function() {
$("#enablepromo0").on('change', function() {
let isChecked = !this.checked;
$("#PromoPanel").toggleClass("hidden", isChecked, {
duration: 300
});
}).trigger('change');
});
.panel {
border: solid lime 1px;
background: #ddffdd;
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
Check to show: <input type="checkbox" id='enablepromo0' />
<div class="container">
<div id="PromoPanel" class="panel hidden">
<h2>Hi There</h2>Get stoked</div>
</div>

both function do the same job so i changed something to show an alert:
$(function () {
$("#enablepromo0").click(function () {
alert("dddddd")
if($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="checkbox" id='enablepromo0'/>
<div id="PromoPanel" style="border: 1px solid red; width:50px; heigth:50px; display:none;">uuu</div>

Move the code to its own function and call as required:
function showHide() {
if ($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
}
$(function () {
showHide();
$("#enablepromo0").click(function () {
showHide();
});
});

Create multiple filter selector in javascript

I got these panels which have options to be filtered by Red, Green and Yellow class, and another Show All option. They are behaving ok, but what I would like to achieve is following: When clicked on Show All, and after that on for example on Yellow -> it should hide everything except yellow. Also, you should be able to select only Yellow + Green, Red + Yellow etc., so that only those buttons stay selected then. And when user clicks on all three buttons, it could automatically select "Show All"...
I'm little confused about logic how to set this up so any help would be welcome, thanks a lot!
Here's a pen with example: https://codepen.io/anon/pen/YOgqRX
$('.main__container').masonry({
itemSelector: '.item',
columnWidth: '.item'
});
$("#filter-show-all").on('click', function() {
$(".item").each(function(item) {
$(this).removeClass("panel-hide");
$('.main__container').masonry();
});
});
$("#filter-red").on('click', function() {
$(".red").toggleClass("panel-hide");
$('.main__container').masonry();
});
$("#filter-green").on('click', function() {
$(".green").toggleClass("panel-hide");
$('.main__container').masonry();
});
$("#filter-yellow").on('click', function() {
$(".yellow").toggleClass("panel-hide");
$('.main__container').masonry();
});

Open my code in codePen:
CodePen
Explainations are comments along with the coding.
Head:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
CSS:
<style>
.main__container {
width: 100%;
}
.item {
width: 100%;
box-shadow: 1px 1px 1px rgba(0,0,0,.1);
padding: 10px;
}
#media(min-width: 800px) {
.item {
width: 49%;
}
}
.red {
background: red;
}
.green {
background: green;
}
.yellow {
background: yellow;
}
/*added css*/
.on{
border: 3px solid blue;
}
.off{
border: none;
}
</style>
HTML:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="filters">
<button id="filter-show-all" class="on">Show all</button>
<button id="filter-red" class="on">Show red</button>
<button id="filter-green" class="on">Show green</button>
<button id="filter-yellow" class="on">Show yellow</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="main__container">
<div class="item red">
<h4>Red</h4>
</div>
<div class="item green">
<h4>Green</h4>
</div>
<div class="item red">
<h4>Red</h4>
</div>
<div class="item yellow">
<h4>Yellow</h4>
</div>
<div class="item yellow">
<h4>Yellow</h4>
</div>
<div class="item green">
<h4>Green</h4>
</div>
</div>
</div>
</div>
</div>
JQuery:
$('.main__container').masonry({
itemSelector: '.item',
columnWidth: '.item'
});
/*
Check if clicked button state is 'on' or 'off'
if it is 'on', After click, let matched color block disappear,
if it is 'off', After click, let matched color block show
*/
/* turn showAll button off, hide all the items */
function showAllOff_hideItems(){
if($('#filter-show-all').attr('class')=='on'){
$('#filter-show-all').click();
}
}
$("#filter-show-all").on('click', function() {
if($(this).attr('class')=="on"){
$(".item").each(function(item) {
$(this).hide();
});
}else{
$(".item").each(function(item) {
$(this).show();
});
}
$('.main__container').masonry();
});
$("#filter-red").on('click', function() {
showAllOff_hideItems();
if($(this).attr('class')=="on"){
$(".red").hide();
}else{
$('.red').show();
}
$('.main__container').masonry();
});
$("#filter-green").on('click', function() {
showAllOff_hideItems();
if($(this).attr('class')=="on"){
$(".green").hide();
}else{
$('.green').show();
}
$('.main__container').masonry();
});
$("#filter-yellow").on('click', function() {
showAllOff_hideItems();
if($(this).attr('class')=="on"){
$(".yellow").hide();
}else{
$('.yellow').show();
}
$('.main__container').masonry();
});
/* Esstential Coding here : */
$('.filters button').on('click',function(){
if($(this).attr('id')!="filter-show-all"){
/*Toggle the clicked button*/
if($(this).attr('class')=="on"){
$(this).attr('class','off');
}else{
$(this).attr('class','on');
}
}else{
/* if show all button is clicked */
/* if it is on, turn all the buttons off */
if($(this).attr('class')=="on"){
$('.filters button').each(function(){
$(this).attr('class','off');
});
/* if it is off, turn all the buttons on */
}else{
$('.filters button').each(function(){
$(this).attr('class','on');
});
}
}
});

Use this jquery and if it doesn't work then let me know
$('.main__container').masonry({
itemSelector: '.item',
columnWidth: '.item'
});
$("#filter-show-all").on('click', function() {
$(this).toggleClass("selected");
if($(this).hasClass("selected"))
{
$(".item").each(function(item) {
$(this).toggleClass("panel-hide");
$('.main__container').masonry();
});
}
else{
$(".item").each(function(item) {
$(this).toggleClass("panel-hide");
$('.main__container').masonry();
});
}
});
$("#filter-red").on('click', function() {
$(this).toggleClass("selected");
if($(this).hasClass("selected"))
{
$(".red").removeClass("panel-hide");
}
else
{
$(".red").addClass("panel-hide");
}
if($('#filter-red').hasClass("selected") && $('#filter-green').hasClass("selected")&& $('#filter-yellow').hasClass("selected"))
{
$($('#filter-show-all').addClass("selected"))
}
else
{
$($('#filter-show-all').removeClass("selected"))
}
$('.main__container').masonry();
});
$("#filter-green").on('click', function() {
$(this).toggleClass("selected");
if($(this).hasClass("selected"))
{
$(".green").removeClass("panel-hide");
}
else
{
$(".green").addClass("panel-hide");
}
if($('#filter-red').hasClass("selected") && $('#filter-green').hasClass("selected")&& $('#filter-yellow').hasClass("selected"))
{
$($('#filter-show-all').addClass("selected"))
}
else
{
$($('#filter-show-all').removeClass("selected"))
}
$('.main__container').masonry();
});
$("#filter-yellow").on('click', function() {
$(this).toggleClass("selected");
if($(this).hasClass("selected"))
{
$(".yellow").removeClass("panel-hide");
}
else
{
$(".yellow").addClass("panel-hide");
}
if($('#filter-red').hasClass("selected") && $('#filter-green').hasClass("selected")&& $('#filter-yellow').hasClass("selected"))
{
$($('#filter-show-all').addClass("selected"))
}
else
{
$($('#filter-show-all').removeClass("selected"))
}
$('.main__container').masonry();
});

How to change Toggle down div to right-left slide with javascript

Hi i have 2 divs one is named as basic and other is advanced.
Then I have button to show advanced.
When I click on show advanced button it toggle down. But I want it to slide from right to left.
here is html
<div class="container" id="divBasic">Basic data</div>
<div class="container top_offset" id="divAdvanced" style=""> Advanced data</div>
<a style="float:right; margin-right: 10px; padding-right: 10px" href="javascript:void(0);" onclick="toggle_advanced(this);" id="hpAdvanced_top">Show Advanced ></a>
here is js
function toggle_basic(source) {
var div = $("#divBasic");
var top_btn = $("#divButtons");
div.toggle();
top_btn.toggle();
$("#divShapes").toggle();
if (source == "shapes") {
storeValue("Basic", "none");
} else {
storeValue("Basic", "block");
}
}
function toggle_advanced(hp) {
var divAdvanced = $("#divAdvanced");
divAdvanced.toggle();
if (hp.outerText != "Show Advanced") {
storeValue("Advanced", "none");
//top_btn.css("height", "30px");
hp.innerText = "Show Advanced";
} else {
storeValue("Advanced", "block");
//top_btn.css("height", "0px");
hp.innerText = "Hide Advanced";
}
}
kindly help me get advanced div as slide from right to left
Thank you

function toggle_basic(source) {
var div = $("#divBasic");
var top_btn = $("#divButtons");
div.toggle();
top_btn.toggle();
$("#divShapes").toggle();
if (source == "shapes") {
storeValue("Basic", "none");
} else {
storeValue("Basic", "block");
}
}
function toggle_advanced(hp) {
var divAdvanced = $("#divAdvanced");
divAdvanced.toggle("slide");
if (hp.outerText != "Show Advanced") {
//storeValue("Advanced", "none");
//top_btn.css("height", "30px");
hp.innerText = "Show Advanced";
} else {
//storeValue("Advanced", "block");
//top_btn.css("height", "0px");
hp.innerText = "Hide Advanced";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container" id="divBasic">Basic data</div>
<div class="container top_offset" id="divAdvanced" style=""> Advanced data</div>
<a style="float:right; margin-right: 10px; padding-right: 10px" href="javascript:void(0);" onclick="toggle_advanced(this);" id="hpAdvanced_top">Hide Advanced ></a>
Use ele.toggle("slide"); to slide left to right, and use jquery-ui to get the effect

use this
$('#divAdvanced').toggle('slide', {
direction: 'left'
}, 1000);
you can change left to right as you like

How to check if a tag has any text

<div id="Div5" style="width: 85%; margin: 10px auto;">
<h4 class="hpH4"></h4>
<p class="hpP setLeft">
<taMsg></taMsg>
</p>
<span class="hideContent" id="Span5">selInf</span>
</div>
Query:
$("taMsg").each(function(){
if (!$(this).text().trim().length) {
alert("THERE IS NO TEXT");
}
});​
The above isn't working. How can I modify so if taMsg doesn't have any text, I get an alert.

Try using :empty:
$("taMsg").each(function(){
if ($(this).is(':empty')) {
alert("THERE IS NO TEXT");
}
});​
or you can do something like this to avoid a div with spaces:
$("taMsg").each(function(){
if(!$.trim($(this).html()).length) {
alert("THERE IS NO TEXT");
}
});​
You can select all empty/not empty elements using the same selector:
var emptyList = $("taMsg:empty");
var notEmptyList = $("taMsg:not(:empty)");

You must tell us how do you wish to treat white-space? This code is removing white-space:
jQuery(document).ready(function($) {
$('taMsg').each(function(index) {
if ($.trim($(this).text()) === "") {
console.log('test');
};
});
});