You will need each line of text to be in its own container element (like a <div>
and wrap each of those elements in another container element (like another <div>
.
This is necessary because a "line" on one viewport may not be the same thing as a "line" on another. This way, each bit of text is always contained. Additionally, if you want to remove the entire line that a word or phrase is on, you can't just replace that word or phrase with string.replace
, because the rest of the line's text will still be there.
Then, when you determine which <div>
needs to be removed, you remove the div
.
Here's an example:
var parent = null, child1 = null, child2 = null, child3 = null, child4 = null, btn = null;
window.addEventListener("DOMContentLoaded", function(){
parent = document.getElementById("parent");
c1 = document.getElementById("child1");
c2 = document.getElementById("child2");
c3 = document.getElementById("child3");
c4 = document.getElementById("child4");
b = document.getElementById("btn");
b.addEventListener("click", function(){
// You need to add your logic for determining which
// child element needs to be removed here. I'm just
// showing the actual code to remove the element.
parent.removeChild(c3);
});
});
<div id="parent">
<div id="child1">Word 1</div>
<div id="child2">Word 2</div>
<div id="child3">Word 3</div>
<div id="child4">Word 4</div>
</div>
<input type="button" id="btn" value="Click to Remove">
word1
,word2
andword3
lines are all in their ownDIVs
or other selectable element?