如何選擇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

回答

相關問題