We Keep Coding

Is there a way to get the exact indexOf an element in a big html string

I am working on an app with vue.js and quill.js in which I am creating some documents.
The content of a document is stored in document.content which is one giant string with a bunch of html tags in it coming straight from quill.js.
When previewing the document I'm rendering the big html string inside a div with v-html attribute like this:
<div v-html="document.content"></div>
i.e.
document.content = "<p>Hello</p><p>World</p><p>Hello World</p><p>Hello</p>"
It's rendereded as (you get the idea):
<div data-v-4ee08204>
<p>Hello</p>
<p>World</p>
<p>Hello World</p>
<p>Hello</p>
</div>
The question is:
When clicking somewhere inside the div is there a way to get the exact index of the character/word/element I've clicked on (because I need to add a comment to it)?
I've tried to attach a click listener to the div, getting the outerHTML of the target element and trying to get the indexOf document.content, but it's not always working, because there can be similar stuff inside the big string like <p>Hello</p> twice and it will get the first one only.
It's possible that my whole approach is wrong, but I'm not really sure.
Any suggestion is welcome. Thanks!

What you could do is to clone the parent element, add the comment using DOM manipulation and then use the parent element's innerHTML, here is an example:
const parent = document.querySelector('#parent');
parent.addEventListener('click', event => {
event.target.classList.add('toBeModified');
const clone = parent.cloneNode(true);
const node = clone.querySelector('.toBeModified');
const comment = document.createElement('span');
comment.textContent = '(edited)';
node.appendChild(comment);
node.classList.remove('toBeModified');
event.target.classList.remove('toBeModified');
console.log(clone.innerHTML);
});
<div id="parent">
<p>Hello</p>
<p>World</p>
<p>Hello World</p>
<p>Hello</p>
</div>
What this does is to add a class (toBeModified) to the clicked element so it can be easily found once the parent is cloned.

Delete only the particular Div Id

<div id="#("Bottomgrid)" class="dgd2"></div>
var element = document.getElementById("#Bottomgrid");
element.empty();
$('.dgd2').empty()
Instead of deleting only Bottom grid its also removing other Div present in the screen.

jQuery .remove() will remove the set of matched elements from the DOM.
While jQuery .empty() will remove all child nodes of the set of matched elements from the DOM.
Considering if you have your HTML as below :
<div id="Bottomgrid" class="dgd2"></div>
and you want to remove div with id="Bottomgrid"
Then your javascript code will be :
$("#Bottomgrid").remove();
//This is not required as far as I see
//$('.dgd2').empty()

If you have a HTML structure like this:
<div class="holder">
<div id="item1">Hey</div>
</div>
you can simply just use this pure JavaScript code to remove the "item1" element:
var element = document.getElementById("item1");
element.parentNode.removeChild(element);

.empty() doesn't remove element it only removes elements children. use $('#Bottomgrid').remove()

Javascript :
document.getElementById("Bottomgrid").remove();
Jquery:
$( "#Bottomgrid" ).remove();

you should give the div name properly like Below how I am writing the Id. also you need to check properly which div you are going to delete. Because if a nested div present in your page and you are going to delete the div which is having all the child div inside that , then all respective div going to be deleted .
Html
<div id="bottomgridDiv" class="dgd2">
<div id="parentDiv" class="dgd2">
<div id="childDiv" class="dgd2">
</div>
</div>
</div>
Javascript
var element = document.getElementById("#bottomgridDiv");
In JQuery:-
$("#bottomgridDiv").remove();
So now if you wants to delete the bottomgridDiv then what ever the div present inside this is going to delete.

Get text inside parent div

I'm trying to get a text from an element, which isn't the first parent of the string. i.e.
<div id="wrp">
<h1>
this is the text I want
</h1>
</div>
let's say I got the div parent by element=document.getElementById("wrap") and now I want to get it's final text without looking inside all it's children : h1 and a. just the text that I see on the site.
Is it possible? Please show me an example.

You can use both innerText or textContent, but innerText doesn't works on Firefox. So, a crossbrowser solution:
var text = element.innerText || element.textContent;
JSBin. Interesting comparision about them.

You want to chain your queries so that you get the anchor tag after you get the wrap div (assuming you will never add more divs inside the anchor tag, which would be a bit weird):
var wrap = document.getElementById("wrap");
var text = wrap.getElementsByTagName("a")[0].innerHTML;
If you take a look at the Mozilla article it has more examples on how to do this. Alternatively there is textContent but since you stated that you might add more elements at a later date, if they have text in them too then you end up needing to refactor:
var wrap = document.getElementById("wrap");
var text = document.getElementById("wrap").textContent;

Removing items from the DOM / View using AngularJS and not jQuery

I was wondering, say I have the following DOM structure in my View / Webpage
<div>
<p>I am some text or a comment or something</p>
X
</div>
<div>
<p>I am some text but this Div may have more content like IMG or inputs</p>
X
</div>
I'd like to add a method on the controller called deleteThisDiv that will remove the parent DIV of the href and all the DIV's contents (including the href I just clicked). This is easy with jQuery as I could just get the parent and use $target.remove() however I want to get out of the jQuery way of things and remove the item using AngularJS best practice. I know I could use jqLite as $target.remove() is supported and I guess I could climb the DOM tree to find the DIV but is there a better* way to do this (like using ng-show/ng-hide, etc)? Please note that I can add IDs to my HTML but I don't want to populate the HTML structure with IDs just yet.
When I say better I mean an AngularJS way! I just want to get out of the mind set of using jQuery for these things... please note that the HTML is coded and not produced by an array or looping through objects, etc

I believe the "angular way" would be to have the divs show conditionally using the ng-show directive if what you're looking for is a function that can show/hide the div. If you're looking to literally either have one or the other div in the DOM I'd take a look at ng-if or ng-switch.
Note that ng-if and ng-switch only evaluates once meaning you wouldn't be able to have a function that "removed" a DIV. ng-show on the other hand is evaluated on each $digest cycle
<div ng-show="someExpression>
<p>I am some text or a comment or something</p>
X
<!--Clicking this will show/hide the div-->
</div>
<div ng-if="someExpression">
<p>I am some text but this Div may have more content like IMG or inputs</p>
X
<!--Clicking this has no effect because ng-if is only evaluated once-->
</div>

Use ng-show...
<div ng-show="showFlag">
<p>I am some text or a comment or something</p>
X
</div>
in your controller you'll need to define the variable like:
$scope.showFlag= true;

You might be looking for this one.
module.controller('TestController',
function TestController($scope) {
$scope.deleteThisDiv = function ($event) {
$event.target.parentNode.parentNode.removeChild($event.target.parentNode);
};
});

I use this directive for very similar reasons:
<div destroyOnEvent="destroyThisDiv">
<p>I am some text or a comment or something</p>
X
</div>
.directive('destroyOnEvent',function($rootScope) {
return {
restrict : 'A',
link : function($scope,$element,$attrs) {
$rootScope.$on($attrs.destroyOnEvent,function() {
$element.remove();
});
}
}
});

Appending a div on unknodw div

I have three divs. How should I append a div onto an unknown div?
<div class="main" >
<div id="drag-box" >
<div id="" class=""> </div>
</div>
</div>
I want to append div on an unknown div which is come after drag-box div. I don't know which div comes after drag-box div. But there must be one div after drag-box div.

$("#drag-box div:first-child").append("<span />");
or
$("#drag-box div").first().prepend("<span>first</span>");
For a complete answers, here it is working:
http://jsfiddle.net/dMUD3/

try this
$("#drag-box div:first-child").attr("id");

Instead of giving you a one liner I would like to give you an indepth solution.
A browser takes your html and parses what is called a DOM Tree out of it.
so if your html is .
<div class="a">
<div class="foo"></div>
<button class="foogle"></button>
</div>
The tree structure will become something like
`-div.a
|-div.foo
`Button.foogle
You should actually look into DOM Api's at MDN
How DOM helps ?
With DOM api's you can actually access the unknown div using the reference to a known div. So if you actually understand your markup and its representation in DOM it should be pretty simple to get reference to nth child of an element;
You can access the child elements by the children attribute.
So
// Get reference to the element.
var parent = document.getElementById("drag-box");
// Use the dom.
var child_i_want = parent.children[0];
// or there is another way
var child_i_reallyWant = parent.firstElementChild;
There are solutions with jQuery but I feel its important for you to Understand basics of DOM even when there are helpful abstraction libraries in existance.

You'll need the + selector. It applies to the object directly following. See here.
.drag-box + div {
}

$('<div></div>').appendTo($('#drag-box div:first'))