I have a string with some DOM HTML saved inside, among which a div with static id="myId", which has no innerHTML but has dynamic width value set.
Example:
myString = "<div class="class">blahblah</div><div id="myId" width="42.584px"></div>"
How can I create a new identical string cutting off the whole <div id="myId" width="42.584px"></div>? The problem is that width="" value changes all the time so I can't do a .replace.
the HTML saved in the string, looks something like this (and number of divs can vary, but obviously only one has the myId div mentioned):
<div id="firstId"></div>
<div id="div0" class="div-class">
<span class="" onclick="clickFunctionTwo()">text div 0</span>
<span class="" id="fasdf"></span>
<span id="btnClose"><img src="close.svg" class="" onclick="clickFunction()"></span>
<div id="myId" class="" style="width: 59.5312px;"></div>
</div>
<div id="div1" class="div-class">
<span class="" onclick="clickFunctionTwo()">text div 1</span>
<span class="" id="eyuacv"></span>
<span id="btnClose"><img src="close.svg" class="" onclick="clickFunction()"></span>
</div>
<div contenteditable="true" id="lastId" style="height:18px;" onkeydown="myFunction()"></div>
You could create a jQuery element from that string, remove the #myID div then grab the new HTML:
var myString = `
<div id="firstId"></div>
<div id="div0" class="div-class">
<span class="" onclick="clickFunctionTwo()">text div 0</span>
<span class="" id="fasdf"></span>
<span id="btnClose"><img src="close.svg" class="" onclick="clickFunction()"></span>
<div id="myId" class="" style="width: 59.5312px;"></div>
</div>
<div id="div1" class="div-class">
<span class="" onclick="clickFunctionTwo()">text div 1</span>
<span class="" id="eyuacv"></span>
<span id="btnClose"><img src="close.svg" class="" onclick="clickFunction()"></span>
</div>
<div contenteditable="true" id="lastId" style="height:18px;" onkeydown="myFunction()"></div>`;
var myNewString = $('<div>').append(myString).find('#myId').remove().end().html();
console.log(myNewString);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Maybe you can try do build that string in another way,like:
var myArray = [
"<div class="class">blahblah</div>",
"<div id="myId" width="42.584px"></div>"
]
And you can build the string with:
var myString = myArray.join("")
And make the changes on myArray[0...n]. So removing a single array position its like removing a div.
Related
How can I click on a smiley / emoji from a list and place it in a input field? I can see in the Inspect Element Q (console log) that it is being clicked but I can not find a way to copy it to the input field.
HTML
<div id="wrapper">
<div class="bubble-container" ></div>
</div>
<div class="emoji" onclick="javascript:smileySelect(event);">
<span title="Happy Face"> 😀 </span>
<span title="Grinning Face"> 😃 </span>
<span title="Grinning Face with Smiling Eyes"> 😄 </span>
</div>
<div id="sendCtrls">
<input type="text" placeholder="Your message here" id="text">
<button id="myBtn" style="width: auto;"> Send </button>
<span title="Emoji" onclick="javascript:smiliesSH();"> 😃</span>
</div>
JAVASCRIPT
function smileySelect(event) {
// get selected item and place it in input field
};
You can get the clicked emoticon with event.target and add the textContent of that to the value of the input element.
I also added a check event.target != event.currentTarget to avoid all icons are inserted when you click on the parent but not on a child (emoticon). When your html content of the event handler gets more complicated then you probably want to add a class to all emoticon spans and check if the clicked element has that class.
function smileySelect(event) {
/*
event.target = the actually clicked element
event.currentTarget = the element that has the event handler
When they are not equal we know the click was on a child of the .emoji element.
Any child is valid since you only have the emoticon span elements inside the .emoji element.
*/
if (event.target != event.currentTarget) {
let smiley = event.target;
document.querySelector('#text').value += smiley.textContent;
}
};
<div id="wrapper">
<div class="bubble-container"></div>
</div>
<div class="emoji" onclick="javascript:smileySelect(event);">
<span title="Happy Face"> 😀 </span>
<span title="Grinning Face"> 😃 </span>
<span title="Grinning Face with Smiling Eyes"> 😄 </span>
</div>
<div id="sendCtrls">
<input type="text" placeholder="Your message here" id="text">
<button id="myBtn" style="width: auto;"> Send </button>
<span title="Emoji" onclick="javascript:smiliesSH();"> 😃</span>
</div>
You can try something like:-
<div id="wrapper">
<div class="bubble-container" ></div>
</div>
<div class="emoji" onclick="smileySelect(event.target.innerHTML)">
<span title="Happy Face"> 😀 </span>
<span title="Grinning Face"> 😃 </span>
<span title="Grinning Face with Smiling Eyes" > 😄 </span>
</div>
<div id="sendCtrls">
<input type="text" placeholder="Your message here" id="text">
<button id="myBtn" style="width: auto;"> Send </button>
<span title="Emoji" onclick="javascript:smiliesSH();"> 😃</span>
</div>
JAVASCRIPT
function smileySelect(emoji) {
if (emoji.includes("span") == false)
document.getElementById("text").value += emoji;
};
How can I can add .active class to the each link which's parent has a specific data attribute?
I need to add the .active class to the .slide-link not the parent which holding the data attribute
$('.slide-link[data-slide="0"]').addClass('active');
$('.slide-link').parent().data('[data-slide="0"]').addClass('active');
.active{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="" data-slide="0">
<a class="slide-link" href="#">0</a>
</div>
<div class="" data-slide="1">
<a class="slide-link" href="#">1</a>
</div>
<div class="" data-slide="2">
<a class="slide-link" href="#">2</a>
</div>
What you should do is add the class to the children (with the slide-link class) of all elements that have [data-slide="0"], like so:
$('[data-slide="0"]').children('.slide-link').addClass('active');
.active{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="" data-slide="0">
<a class="slide-link" href="#">0</a>
</div>
<div class="" data-slide="1">
<a class="slide-link" href="#">1</a>
</div>
<div class="" data-slide="2">
<a class="slide-link" href="#">2</a>
</div>
Your first snippet didn't work, because there aren't any elements with a class of slide-link and data-slide="0". Your second snippet produces an error, because jQuery's data method only returns strings or undefined, which both don't have an addClass() method.
This question already has answers here:
How to remove only the parent element and not its child elements in JavaScript?
(13 answers)
Closed 5 years ago.
Could anyone help me on how I can remove div tags without removing their content in JavaScript?
This is my html from which I need to remove all div tags:
<div id="id1" class="someclass">
<p>some text
<label> Test content </label>
</p>
<div id="id2" style="overfolw:scroll">
<span>some text</span>
<div id="level3">
<label> Test content </label>
<a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
</div>
</div>
</div>
Expected output would be like shown below.
<p>some text
<label> Test content </label>
</p>
<span>some text</span>
<label> Test content </label>
<a href=https://twitter.com/realDonaldTrump/status/882186896285282304 target=_blank rel=noopener>creepiness</a>
1.Using pure java-script:-
var divs=document.getElementsByTagName('div');
var counter = divs.length-1;
for(i=counter;i>=0;i--){
divs[i].outerHTML = divs[i].innerHTML;
}
<div id="id1" class="someclass">
<p>some text
<label> Test content </label>
</p>
<div id="id2" style="overfolw:scroll">
<span>some text</span>
<div id="level3">
<label> Test content </label>
<a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
</div>
</div>
</div>
2.You can use jQuery unwrap() also:-
$(document).ready(function(){
$('div').contents().unwrap();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1" class="someclass">
<p>some text
<label> Test content </label>
</p>
<div id="id2" style="overfolw:scroll">
<span>some text</span>
<div id="level3">
<label> Test content </label>
<a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
</div>
</div>
</div>
Using cutting edge technology such as iterable nodelists and replaceWith, it's really straightforward with the plain DOM API:
for (const div of document.querySelectorAll("div"))
// alternatively: Array.from(document.getElementsByTagName("div"))
div.replaceWith(...div.childNodes);
you can use unwrap function.
$('div').children().unwrap();
If you want to do in plain javascript. You can get a list of all divs using document.getElementsByTagName("div"), but you will need to unwrap these divs in reverse order. This is a nodelist so reverse() will not work on it, so you can first use [].slice.call() on it which gives you an array and then you can reverse it. Then in the array unwrap each element.
you can do something like this:
var elements = [].slice.call(document.getElementsByTagName("div"), 0).reverse();
elements.forEach(function(el){
el.outerHTML = el.innerHTML;
});
<div id="id1" class="someclass">
<p>some text
<label> Test content </label>
</p>
<div id="id2" style="overfolw:scroll">
<span>some text</span>
<div id="level3">
<label> Test content </label>
<a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a>
</div>
</div>
</div>
i would like to know how i can increment class on click my class="item" i want to change on click every time to item1 item2 item3 exc how can i do this? this is what i want to incrament
<div href="#" class="item" data-bind="draggable:true,droppable:true">
<div class="item">
<textarea data-bind="value:textContent1" Placeholder="Type text to append"></textarea>
</div>
<button data-bind="click:addNew">Generate New Div</button>
<div href="#" class="item" data-bind="draggable:true,droppable:true">
<span data-bind="click:$parent.remove">X</span>
<br/>
<br/>
<center>
<span class="text i" data-bind="text:$data"></span><input class="edit_text"/></center>
</div>
HTML
<button onclick="addNew()">Generate New Div</button>
<div id="my_div" class="item1"></div>
JavaScript
var i = 1;
function addNew() {
document.getElementById("my_div").classList.remove("item" + i++);
document.getElementById("my_div").classList.add("item" + i);
}
This will increment the class name each time the button is clicked.
I am trying to copy contents of one span to another span on anchor click even.
It works fine if i remove the wrapper title div's example jsFiddle
when i wrap them inside div it doesnt work anymore i tried different thing so far i am not able to find right property or function to use.
This one needs fix jsFiddle
<div style="float:left; width=800px;" id="video_container">
<iframe width="438" height="250" src="http://www.youtube.com/embed/vOnCRWUsSGA?wmode=transparent&rel=0&theme=light&color=white&autoplay=0" frameborder="0" allowfullscreen="1"></iframe>
</div>
<span class="active-video-title">Title</span>
<span class="active-video-date">Date</span>
<div class="row">
<br> <a href="oDAw7vW7H0c" class="play-youtube">
<span class="youtube-thumbnail">Thumnnail 1</span>
<div class="title-wrapper">
<span class="title">Title of the Video 1</span>
<span class="date">Date 1</span>
</div>
</a>
<br> <a href="5F-Wge37_ys" class="play-youtube">
<span class="youtube-thumbnail">Thumnnail 2</span>
<div class="title-wrapper">
<span class="title">Title of the Video 2</span>
<span class="date">Date 2</span>
</div>
</a>
</div>
<div class="row2">
<br> <a href="oDAw7vW7H0c" class="play-youtube">
<span class="youtube-thumbnail">featured Thumnnail 1</span>
<div class="title-wrapper-control">
<span class="featured-title">featured Title of the Video 1</span>
<span class="featured-date">featured Date 1</span>
</div>
</a>
<br> <a href="5F-Wge37_ys" class="play-youtube">
<span class="youtube-thumbnail">featured Thumnnail 2</span>
<div class="title-wrapper-control">
<span class="featured-title">featured Title of the Video 2</span>
<span class="featured-date">featured Date 2</span>
</div>
</a>
</div>
.children() will get the children of each element in the set of matched elements, optionally filtered by a selector.
Use find() method which will get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.:
$(document).ready(function () {
$('.play-youtube').click(function (e) {
e.preventDefault();
var URL = $(this).attr('href');
var htm = '<iframe width="438" height="250" src="http://www.youtube.com/embed/' + URL + '" frameborder="0" allowfullscreen="1" ></iframe>';
$(".active-video-title").html($(this).find(".title").html());
$(".active-video-date").html($(this).find(".date").html());
$(".active-video-title").html($(this).find(".featured-title").html());
$(".active-video-date").html($(this).find(".featured-date").html());
return false;
});
});
DEMO FIDDLE