如何选择div并使用javascript删除选定的div

我想创建一个CRUD操作。我可以创建一个DIV，将内容保存到Div中，我无法删除DIV。我需要删除我创建的选定DIV。我坚持如何选择DIV并删除选定的DIV。如何选择div并使用javascript删除选定的div

Note: Should use only plain javaScript only.

问题：

需要删除高亮显示事业部。

请参考下面我try代码

<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>

请帮我在这。由于

来源

2014-03-04 Hariharan

你想删除一个DIV或全部DIV下'jobList' DIV creted？ –

需要删除所选的Div单独，在JobList下.. @Yagnesh – Hariharan

你会如何选择div？ –

一个解决方案是，当您的函数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(); 
}

来源

2014-03-04 11:51:48

你可以尝试remove（）函数

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

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

来源

2014-03-04 11:06:39 Maxdow

如何获得“myDiv”是我面临的问题。所选的Div应该被突出显示，并且需要得到它的参考。 – Hariharan

你可以通过添加一个类名'div.className =“highlightclass”'来突出你的div。要删除你的div，你必须保留一个参考或通过一个特定的ID进行搜索。 – Maxdow

解决了突出问题Maxdow。 – Hariharan

猜你在找什么是anchorNode

Selection.anchorNode

返回节点在其中选择开始。

- https://developer.mozilla.org/en-US/docs/Web/API/Selection.anchorNode

＆hellip;并且动态创建的‘ 作业' ’ div s应该对anchorNode有效，以获取它们。因此，使用下面的代码来创建和删除它们— http://jsfiddle.net/uMhXM/2/

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

function createJob() { 
    //Create an INPUT to get user input 
    var input = document.getElementById('input'); 
    if (input === undefined || input === null) { 
     input = document.createElement('input'); 
     input.type = 'text'; 
     input.id = 'input'; 
    } 
    //Add the created INPUT to 'jobListContainer' 
    jobListContainer.appendChild(input); 
}

function saveJob() { 
    var input = document.getElementById('input'); 
    if (input !== undefined && input !== null) { 
     if (input.value !== "") { 
      //Create the 'job' DIV enclosing INPUT value 
      var job = document.createElement('div'); 
      job.setAttribute("id", "job_" +jobList.children.length); 
      job.textContent=input.value 
      //Add the created 'job' DIV to 'jobList' 
      jobList.appendChild(job); 
      //Remove the INPUT 
      input.remove(); 

     } else { 
      alert("Please Enter Job"); 
     } 
    } 
}

function deleteJob(){ 
    window.getSelection().anchorNode.remove(); 
}

来源

2014-03-04 11:25:11 rps

感谢您的回复。它删除jobList中的所有Div。 – Hariharan

是否正确创建了'div里面的_jobList_？即所有的标签都已关闭？如果可能的话，发布一个你得到的东西的小提琴，以便我可以直接在你的代码中进行更改 – rps

即时通讯无法发布代码jsfiddle。它给错误。所以只有我在这里发布了整个代码。以上是完整的代码。即使我试图用我的代码编辑你的jsfiddle代码，得到相同的错误。 – Hariharan

如何选择div并使用javascript删除选定的div

回答

相关问题