We Keep Coding

deleting character from a string one by one

i've been trying to create an effect like a string is being typed in my webpage. In other words that string will appear character by character. so I did this using jquery and succeded .
the code I used is something like this,
$(function() {
var string = "Coming Soon|",
stringCount = 0;
setInterval(function(){
$('.main_section_animate span').append(string[stringCount]);
stringCount += 1;
},100);
})
Note that the span tag is empty, nothing is in there.
Problem is now I'm trying to delete the string character by character, backwards. I've tried using setInterval and replace(string[stringCount],''), selecting the main section span and main section span.text() but it didn't work and gave some weird results.
And also there are other thing I tried but mainly some combinition of text() with replace
so, anyone can help me out with this?

can be:
let str = 'Coming Soon |';
const $span = $('.main_section_animate span');
$span.html(str);
const animation = setInterval(() => {
str = str.slice(0, -1)
$span.html(str)
!str.length && clearInterval(animation)
}, 100)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_section_animate">
<span></span>
</div>

You should probably clear that interval to get the intended result, see: https://jsfiddle.net/2mj5zp7h/
HTML:
<div class="main_section_animate">
<span></span>
</div>
JS:
$(function() {
var string = "Coming Soon|",
stringCount = 0;
var animation = setInterval(function(){
$('.main_section_animate span').append(string[stringCount]);
stringCount += 1;
if(stringCount>=string.length) {
clearInterval(animation);
animation = setInterval(function(){
$('.main_section_animate span').text(string.substr(0,stringCount));
stringCount -=1;
if(stringCount<0)
clearInterval(animation);
},100);
}
},100);
})

EDITED: Change code.
This is a solution for you :)
Use split();
const str = "Coming Soon ...";
let timer;
function deletingEffect() {
let word = str.split("");
var loopDeleting = function() {
word.pop();
document.getElementById('word').innerHTML = word.join("");
timer = setTimeout(loopDeleting, 200);
};
loopDeleting();
};
deletingEffect();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_section_animate">
<span id="word"></span>
</div>

Use .slice() and a simple for loop to get what you need.
let str = 'Coming Soon|';
for (let i = -1+str.length; i > 0; i--) {
let delay = 100*(str.length-(i+1))
setTimeout(()=>{
$('.main_section_animate span').html( str.slice(0, i) );
}, delay);
}
Notice the for loop starts at .length and walks downwards (i--) while i > 0. This gives you an easy way to use str.slice().
Also notice the removal of setInterval which is a waste of CPU in your case. Instead, just set a one-shot setTimeout for each removal.
Finally, use .html instead of .append.

javascript dynamically remove text

I have successfully created a button which adds text to the webpage however I do not know a viable way to remove text once this has been created. The js code I have is:
var addButtons = document.querySelectorAll('.add button');
function addText () {
var self = this;
var weekParent = self.parentNode.parentNode;
var textarea = self.parentNode.querySelector('textarea');
var value = textarea.value;
var item = document.createElement("p");
var text = document.createTextNode(value);
item.appendChild(text)
weekParent.appendChild(item);
}
function removeText() {
//document.getElementbyId(-).removeChild(-);
}
for (i = 0; i < addButtons.length; i++) {
var self = addButtons[i];
self.addEventListener("click", addText);
}
I have viewed various sources of help online including from this site however I simply cannot get any to work correctly. Thank you in advance.

Sure, it should be easy to locate the added <p> tag relative to the remove button that gets clicked.
function removeText() {
var weekParent = this.parentNode.parentNode;
var item = weekParent.querySelector("p");
weekParent.removeChild(item);
}
If there is more than 1 <p> tag inside the weekParent you will need a more specific querySelector.

i can add textbox with button but i don't know how to remove

var emails = document.getElementById('emails'),
add_link = document.createElement('a'),
template = emails.getElementsByTagName('div'),
current = template.length,
max = 20;
template = template[0];
submit1.onclick = function () {
var new_field = template.cloneNode(true);
current += 1;
new_field.innerHTML = new_field.innerHTML.replace(/1/g, current);
emails.appendChild(new_field);
if (current === max) {
add_link.onclick = null;
document.body.removeChild(add_link);
}
return false;
};
document.body.appendChild(add_link);
copy from this link
add multiple textbox using button click in javascript
how to create button for remove ,please tell me

Try using something like this.
elememt.parentNode.removeChild(element);
This question has been asked and posted on this site. Look at this link.
Remove an Element with Javascript

JQuery: for condition is not able to complete due to .replaceWith manipulation

I am trying to get a line of JQuery script to read every paragraph string found in a div and split that paragraph every time there is a ','. My issues is that I am unable to POST all of the array at once, so the replaceWith function only outputs the first value of the array because the rest of the array is deleted when the for condition returns to increment to myArray[1].
Is there anyway for me to post every value in the 'array of splits' to separate html elements without leaving the initial string and/or turning every created element a child of the previous element?
DEMO
http://jsfiddle.net/ry25Q/
HTML
<div class="data">
<i>days_of_week</i>
<p>mon,tue,wed,thur,fri,sat,sun</p>
</div>
<div>
<input type="button" class="btnClick Button" value="Click" />
</div>
JS CODE
$(function () {
$('.btnClick').click(function () {
var data = $('.data p').text();
var splitter = data.split(',');
for (var i = 0; i < splitter.length; i++) {
$(".data p").replaceWith("<span class='dataseg'>" + splitter[i] + "</span>")
}
});
});

You don't need a loop. Since you're only replacing one p element, just call .replaceWith() once with the full HTML string you're inserting.
DEMO: http://jsfiddle.net/Vfk4e/
$(function () {
$('.btnClick').click(function () {
var p = $('.data p');
var splitter = p.text().split(',');
var open = "<span class='dataseg'>";
var close = "</span>"
p.replaceWith(open + splitter.join(close + open) + close)
});
});

Can't you just add $('.data p').text(''); before your for statement? This will clear the contents,t hen your .append from your fiddle will work just fine.
$(function () {
$('.btnClick').click(function () {
var data = $('.data p').text();
var splitter = data.split(',');
$('.data p').text('');
for (var i = 0; i < splitter.length; i++) {
$(".data p").append("<span class='dataseg'>" + splitter[i] + "</span>")
}
});
});

Try to create a variable for the span element you wish to replace the <p> element with. Then inside of your for loop, sequentially add your data to the span element. After the loop, close your span and then call replaceWith() with the span variable.
$(function () {
$('.btnClick').click(function () {
var data = $('.data p').text();
var splitter = data.split(',');
var daySpan = "<span class='dataseg'>";
for (var i = 0; i < splitter.length; i++) {
daySpan += splitter[i];
}
daySpan += "</span>";
$(".data p").replaceWith( daySpan );
});
});
Demo: http://codepen.io/imajedi4ever/pen/kpzCD/?editors=101

Jquery Problem Sort of Auto Slideshow

I'm having some problems, I'd like to have a sort of slideshow where users have 4 buttons, and when they click one div appears and the others disappear. The div's are all in the same place with the same size. I'd also like to put this automatic
var Idx = 1;
var IntervalKey = setInterval = (auto, 5000);
var auto = function() {
$("#MainImage").eq(Idx).fadeIn(1000);
while(Idx <3) {
Idx++;
$("#MainImage").eq(Idx).hide();
}
Idx++;
if(Idx>3) {
Idx = 0;
}
};
$(".botao-imagem").click(function(){
Idx = $(".botao-imagem").index(this);
auto();
});

Your main issue is repeated IDs, IDs must be unique, so $("#ID").eq() doesn't every have a purpose really, since it should be 1 or 0 results. First give the elements a class instead:
<div class="MainImage"><p>111111</p></div>
<div class="MainImage"><p>222222</p></div>
<div class="MainImage"><p>333333</p></div>
<div class="MainImage"><p>444444</p></div>​
and use a class selector, like this:
$(".MainImage")
Also auto needs to be declared before using it or define it as a function directly, overall like this:
var Idx = 0;
var IntervalKey = setInterval(auto, 5000);
function auto() {
$(".MainImage").hide().eq(Idx).fadeIn(1000);
Idx++;
if(Idx>3) Idx = 0;
};
$(".botao-imagem").click(function(){
Idx = $(".botao-imagem").index(this);
auto();
});
You can test the updated/working version with the above code here.