Как выбрать div и удалить выбранный div с помощью JavaScript

0

Мне хотелось создать операцию CRUD. Я могу создать DIV, сохранить содержимое в Div, я не могу удалить DIV. Мне нужно удалить выбранный DIV, который я создал. Я встал, как выбрать DIV и удалить выбранный DIV.

Note: Should use only plain javaScript only.

Проблема:

  1. Необходимо удалить выделенное 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>

Пожалуйста помоги мне с этим. благодаря

  • 0
    Вы хотите удалить один div или все div, созданные в div jobList ?
  • 0
    Необходимо удалить выбранный Div Alone, под JobList .. @Yagnesh
Показать ещё 3 комментария
Теги:

3 ответа

0
Лучший ответ

Одним из решений является то, что, когда вы selectText(containerid) функцию selectText(containerid) храните ваш контейнер в глобальной переменной и на основе этого идентификатора вы удаляете выбранный div в функции deleteJob() которая вызывает нажатие кнопки "Удалить".

 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();
}
Поделиться
0

Угадайте, что вы ищете, это anchorNode


Selection.anchorNode

Возвращает узел, в котором начинается выбор.

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


... и динамически созданный div 'job' 'должен быть действительным для 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();
}
Поделиться
  • 0
    Спасибо за ваш ответ. Это удаляет все Div внутри jobList.
  • 0
    правильно ли был создан div- файл внутри JobList ? т.е. все теги были закрыты? Если возможно, опубликуйте рабочую информацию о том, что вы получили, чтобы я мог внести изменения в ваш код напрямую
Показать ещё 2 комментария
0

Вы можете попробовать функцию remove()

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

elem.parentNode.removeChild(elem);
// or
elem.remove();
Поделиться
  • 0
    Как получить «myDiv» является проблемой, с которой я сталкиваюсь. Выбранный Div должен быть выделен и должен получить ссылку на него.
  • 0
    Вы можете выделить свой div, добавив имя класса div.className="highlightclass" . Чтобы удалить свой div, вы должны сохранить ссылку на него или выполнить поиск по определенному идентификатору.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню