如何使用javascript选择一个div并删除所选div_Javascript_Html

如何使用javascript选择一个div并删除所选div

javascript html

如何使用javascript选择一个div并删除所选div,javascript,html,Javascript,Html,我想创建一个CRUD操作。我可以创建一个DIV，将内容保存到该DIV，我无法删除该DIV。我需要删除已创建的选定DIV。我遇到了如何选择DIV和删除所选DIV的问题 Note: Should use only plain javaScript only. 问题: 需要删除突出显示的Div 请参考我下面的试用码 <html> <head> <script> var addid = 0; function createJob() {

我想创建一个CRUD操作。我可以创建一个DIV，将内容保存到该DIV，我无法删除该DIV。我需要删除已创建的选定DIV。我遇到了如何选择DIV和删除所选DIV的问题

Note: Should use only plain javaScript only.

问题:

需要删除突出显示的Div

请参考我下面的试用码

<html>
<head>
<script>
    var addid = 0;
    function createJob() {
        var jobList = document.getElementById("jobList");

        if(document.getElementById('jobitem_' + (addid))) {
            if((document.getElementById('jobitem_' + (addid)).textContent) == "") {

            }else{
                addid++;
                jobNameCreation(jobList,addid); 
            }
        }
        if(addid == 0){
            addid++;
            jobNameCreation(jobList,addid);
        }

    }

    function saveJob() {
        var text_id = 'jobitem_' + addid;
            var mainDiv = document.getElementById(text_id);
        if(mainDiv.children[0].value == ""){
            alert("please enter job name");
        }else{
            mainDiv.textContent =mainDiv.children[0].value; 
        }
    }

    function deleteJob() {
        /*var t = '';
                if(window.getSelection){
            alert("1");
                    t = window.getSelection();
                }else if(document.getSelection){
            alert("2");
                    t = document.getSelection();
                }else if(document.selection){
            alert("3");
                    t = document.selection.createRange().text;
                }
                alert(t);
        */


    }





    function selectText(containerid) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById(containerid));
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(document.getElementById(containerid));
            window.getSelection().addRange(range);
        }
    }

    function jobNameCreation(jobList,addid){
        var text = document.createElement('div');
            text.id = 'jobitem_' + addid;
            text.innerHTML = "<input type='text' value='' style='padding:5px; width: 185px;'  />";
        text.onclick = function (e) {
                 selectText(text.id);
        };
        jobList.appendChild(text);  
    }


</script>

</head>

<body>
    <button type="button" onclick="createJob();"> Create </button>  
    <button type="button" onclick="saveJob();"> Save </button>  
    <button type="button" onclick="deleteJob();"> Delete </button>  
    <br>
    <div id="jobListContainer">
        <div id="jobList">
        </div>
    </div>
</body>

</html>


var-addid=0；
函数createJob（）{
var jobList=document.getElementById（“作业列表”）；
if（document.getElementById（'jobitem_'+（addid）））{
if（（document.getElementById（'jobitem_'+（addid））.textContent）==“”）{
}否则{
addid++；
作业名称创建（作业列表，添加）；
}
}
如果（addid==0）{
addid++；
作业名称创建（作业列表，添加）；
}
}
函数saveJob（）{
var text_id='jobitem_'+addid；
var mainDiv=document.getElementById（text\u id）；
if（mainDiv.children[0]。值==“”）{
警报（“请输入作业名称”）；
}否则{
mainDiv.textContent=mainDiv.children[0]。值；
}
}
函数deleteJob（）{
/*var t=''；
if（window.getSelection）{
警报（“1”）；
t=window.getSelection（）；
}else if（document.getSelection）{
警报（“2”）；
t=document.getSelection（）；
}else if（文档选择）{
警报（“3”）；
t=document.selection.createRange（）.text；
}
警报（t）；
*/
}
函数selectText（容器ID）{
if（文档选择）{
var range=document.body.createTextRange（）；
range.moveToElementText（document.getElementById（containerid））；
range.select（）；
}else if（window.getSelection）{
var range=document.createRange（）；
range.selectNode（document.getElementById（containerid））；
window.getSelection（）.addRange（范围）；
}
}
函数JobName创建（jobList，addid）{
var text=document.createElement（'div'）；
text.id='jobitem_uuuz'+addid；
text.innerHTML=“”；
text.onclick=函数（e）{
选择text（text.id）；
};
作业列表.appendChild（文本）；
}
创造
拯救
删除

请帮我做这个。谢谢

您可以尝试remove（）函数

var elem = document.getElementById("myDiv");

elem.parentNode.removeChild(elem);
// or
elem.remove();

猜猜你在找什么

选择。锚定返回选择开始的节点

--

document.onLoad = function () { jobListContainer = document.getElementById('jobListContainer'); jobList = document.getElementById('jobList'); }

…并且动态创建的“作业”
div
s应该对
anchorNode
有效以获取它们。因此，请使用下面的代码创建和删除它们-

document.onLoad = function () { jobListContainer = document.getElementById('jobListContainer'); jobList = document.getElementById('jobList'); }

一种解决方案是，当调用函数
selectText（containerid）
时，将containerid存储到全局变量中，并根据该id删除
deleteJob（）
函数中选定的div，该函数在单击Delete按钮时被调用

var addid = 0; var selectedId = ''; function selectText(containerid) { if (document.selection) { var range = document.body.createTextRange(); range.moveToElementText(document.getElementById(containerid)); range.select(); } else if (window.getSelection) { var range = document.createRange(); range.selectNode(document.getElementById(containerid)); window.getSelection().addRange(range); } selectedId = containerid; } function deleteJob() { document.getElementById(selectedId).remove(); }

是否要删除作业列表下的一个div或所有div？需要单独删除作业列表下的选定div@Yagneshh您将如何选择div？这是facing中的问题，我需要突出显示相同的颜色以用于蓝色@Yagnesh解决了Yagnesh的突出显示问题。只需要删除选中的一个。请参考我的更新代码。如何获得“myDiv”是我面临的问题。所选Div应高亮显示，并且需要获取其引用。您可以通过添加类名来高亮显示您的Div
Div.className=“highlightclass”
。要删除您的div，您必须在其上保留一个引用或按特定id进行搜索。要选择您的div（如果我知道是您的“jobitem”+（addid）div？），您可以在createJob函数中保留一个临时引用
var jobitem=document.getElementById（“jobitem”+（addid））
。（您也可以在if语句中使用它，以避免对dom进行研究）感谢您的回复。它删除了作业列表中的所有Div。是否正确创建了作业列表中的“Div”？i、所有的标签都关闭了吗？如果可能的话，发布一个你到目前为止得到的有用的东西，这样我就可以直接在你的代码中进行更改。我无法发布代码JSFIDLE。这是一个错误。所以只有我在这里发布了全部代码。以上是完整的代码。甚至我也尝试用我的代码编辑你的JSFIDLE代码，得到了同样的错误。嘿，问题也出在你的创建代码中，动态创建的
DIV
s似乎无效，因此
anchorNode
没有拾取它们！我已经在我的答案中添加了经过编辑的代码和一把小提琴。希望有帮助。
function deleteJob(){ window.getSelection().anchorNode.remove(); }

var addid = 0; var selectedId = ''; function selectText(containerid) { if (document.selection) { var range = document.body.createTextRange(); range.moveToElementText(document.getElementById(containerid)); range.select(); } else if (window.getSelection) { var range = document.createRange(); range.selectNode(document.getElementById(containerid)); window.getSelection().addRange(range); } selectedId = containerid; } function deleteJob() { document.getElementById(selectedId).remove(); }