Динамически создавать и удалять HTML-элемент

-1

Как я могу создать HTML-элемент динамически, сделать что-то с ним, а затем его нужно удалить. Но важно, чтобы он действительно удалился. Вот мой подход:Динамически создавать и удалять HTML-элемент

var newdiv = document.createElement('div'); 
newdiv.setAttribute('id','MyDiv'); 
$('#MyDiv').css({'width':'100px','height':'100px'}); 
$('#MyDiv').html('This is a test'); 

$('#MyDiv').remove(); // It should be work ? 

// Is it possible to delete it as follows? 
newdiv.remove();

Как я уже говорил, это очень важно, чтобы действительно удалить элемент, так как функция «createElement()» часто может получить вызывается.

Как проверить, действительно ли новый созданный HTML-элемент удален?

Я тестирую следующее, сохраняется ли элемент, но я всегда верю!

alert( $('#MyDiv').length == 1);

Ниже приведены две ссылки, но их было недостаточно для решения моей проблемы.

setting the id attribute of an input element dynamically

createElement and delete DOMElement

Спасибо.

источник

2014-10-12 user3815508

Почему вам нужно создать div, отредактировать его и удалить его, даже не добавляя его в dom? – BeNdErR

Ваша смесь jQuery с простым Javascript немного болит. Попробуйте 'newdiv.parentNode.removeChild (newdiv)'. –

вы не вводили newdiv в DOM, поэтому вы не можете удалить его из DOM. Кроме того, идентификатор newdiv будет '# MyDiv', но' $ ('# MyDiv') 'получает элемент с идентификатором' MyDiv' –

попробовать это, возможно, является то, что вы хотите:

<html> 
    <head> 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script> 
    var div = document.createElement("div"); 
    $(function(){ 
     $("body").append(div); 
     $(div).css({'width':'100px','height':'100px','border':'solid 1px black'}).html('This is a test'); 
     //$(div).remove(); 
    }); 
    </script> 
    </head> 
    <body> 
    </body> 
</html>

dont забудьте не использовать // $ (div) .remove();

источник

2014-10-12 22:31:45 dTobon

Да, точно! Это то, что я искал. Он работает очень хорошо, и созданный объект можно удалить. :). Спасибо! – user3815508

Если вы можете использовать JQuery вы можете попробовать следующее:

$("body").append("<div id="MyDiv">This is a test</div>"); // Create MyDiv div before </body> tag (you can use .prepend(...) to create it after <body>) 

$("#MyDiv").css({'width':'100px','height':'100px'}); // Give some style to MyDiv 

$("#MyDiv").remove(); // Delete MyDiv

источник

2014-10-12 21:51:16

Хорошо, но я хочу использовать функцию createElement(). Для меня важно удалить созданный элемент. – user3815508

Проверьте это: 'g = document.createElement ('div'); g.setAttribute ("id", "MyDiv"); g.innerHTML = "Это тест" ' –

' "

This is a test

" 'создает синтаксическую ошибку. Вместо этого используйте ''

This is a test

' '. –

Прежде всего, я вижу, у вас есть ошибки в коде в этой строке:

newdiv.setAttribute('id','#MyDiv')

значение атрибут id не должен иметь «#» (знак хеширования) - с вашим элементом кода newdiv будет иметь id как «#MyDiv», но это недопустимый ID для jQuery, поскольку jQuery использует этот шаблон для ID Selector («#idName»))

Yo и может динамически удалить элемент с пути, но я предполагаю, что ранее вы должны приложить его к другому элементу на странице, используя jQuery.append (вы элемент/селектор) метод

источник

2014-10-12 21:53:16 lexeek

Хорошо, это значит, если я не открываю элемент в DOM, то я не могу его удалить? – user3815508

Собственно, где элемент генерируется, когда не в DOM? Я думал, что все элементы создаются в DOM. Хорошо, я буду лучше разбираться в этом :). – user3815508

>> тогда я не могу удалить его Нет, вы можете удалить его. Созданный элемент помещается в память. Вы можете работать с ним (newdiv) по своему усмотрению. Но если вы используете jquery и пытаетесь найти элемент по селектору, он предполагает, что элементы находятся в DOM, в другом случае вы не можете найти элемент. – lexeek

Динамически создавать и удалять HTML-элемент

ответ

Смежные вопросы