如何在函数内部创建动态创建的元素

时间:2015-06-24 18:23:12

标签: javascript

我想在用户点击右侧的红色十字按钮时删除列表项, 我为每个列表项动态添加了关闭按钮。 如何定位我添加到' a'标签'点击链接'从功能外部?

我想用纯粹的javascript实现这个目标

http://jsfiddle.net/rchmmkmd/

由于



(function(){

    var clickGo = document.querySelector('.button-go');
    var searchInput = document.querySelector('.search-input');
    var list = document.querySelector('.list');
    var listArray = [];

    var clickGoFunc = function() {
            var searchValue = searchInput.value;

            // check if input field is empty
            if(searchValue === ""){
                
                alert("please put a value in the input field");
            
            }else{

                // check if list item already exists in the array named listArray
                if(listArray.indexOf(searchValue) == -1){
                    listArray.push(searchValue);

                        // Function for creating loop for added array items and enclosing each array item inside <li>
                        //Also adding a close button to each array item by adding <a> Tag
                        var runIt = function (){
                                for(var i= 0; i < listArray.length; i++ ){
                                    var liTag = document.createElement('li');
                                    var removeItem = document.createElement('span');
                                    var closeLink = document.createElement('a');
                                    closeLink.className = "close-link";
                                    closeLink.setAttribute('href', "#");
                                    closeLink.textContent = 'X';

                                    // adding <a> tag inside span
                                    removeItem.appendChild(closeLink);

                                    liTag.textContent = listArray[i].toUpperCase();
                                    list.appendChild(liTag);
                                    liTag.appendChild(removeItem);
                                    list.appendChild(liTag)
                                } 
                                // end of for loop
                        }; 
                        // end of runit

                        // clearing ul.list container before reloading array items.
                        list.innerHTML = "";

                        // calling runIt funtion which contains for loop  for all the array items
                        list.appendChild(runIt());

                }else{
                    alert("value already exisits");
                } 
                // end of if and else statement which is checking if value is already there is the array
                // pushing new values in the listArray array 
                // wrapping new array items in li tags and adding close button on each array item
            }
            // if statement checking if the input field is empty , if not it runs other function which checks following 
                    // end of if and else statement which is checking if value is already there is the array
                    // pushing new values in the listArray array 
                    // wrapping new array items in li tags and adding close button on each array item
            } 
            // end of clickGoFunc


    //calling function 
    clickGo.addEventListener('click', function(){
            clickGoFunc()
    });

}());
&#13;
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}.container-header{background-color:#00628B}.row-header{min-height:120px;text-align:center;color:#fff;font-size:50px;font-family:oswald;padding-top:35px}.container-search-bar{background-color:#E6E6DC;min-height:75px}.container-search-inner .input-group{margin-top:20px}.container-content{padding-top:50px}.list li{background-color:#6C6C6C;padding:10px;margin-bottom:10px;color:#fff;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.close-link{color:#fff;background-color:red;padding:3px;border-radius:3px}.list li span{float:right}
&#13;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search NOMO</title></title>
	  <link rel="stylesheet" href="assets/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/stylesheets/css/style.min.css">
</head>
<body>
   <div class="container-fluid container-wrapper">
      <div class="row row-wrapper">
         <div class="container-fluid container-header">
              <div class="row row-header">
                Search NOMO
              </div> <!-- row-header -->
         </div> <!-- container-header -->
         <div class="container-fluid container-search-bar">
             <div class="row row-search">
                <div class="container container-search-inner">
                  <div class="row">
                    <div class="col-lg-12">
                        <div class="input-group">
                          <input type="text" class="form-control search-input" placeholder="Add to List...">
                          <span class="input-group-btn">
                            <button class="btn btn-default button-go" type="button">Add</button>
                          </span>
                        </div><!-- /input-group -->
                      </div><!-- /.col-lg-6 -->
                 </div> <!-- row -->
               </div> <!-- container-search-inner -->
            </div> <!-- row-search -->
        </div> <!-- container-search-bar -->
        <div class="container container-content">
            <ul class="list">
                
            </ul>

        </div>
      </div> <!--row-wrapper -->
   </div> <!-- container-wrapper-->

   <!-- javascripts -->
   <script src="assets/jquery/dist/jquery.min.js"></script>
<script src="assets/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/js/script.min.js"></script>

</body>
</html>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

使用jQuery,选择具有类.close-link的所有标记,并将事件绑定到click方法。

如果您需要从标记遍历以转到其li。你设置它的方式是这样的:

<li><span><a></a></span></li>

两个父母,所以使用:

$(this).parent().parent()

现在已选中点击的li的父a。致电.remove()以删除它及其所有孩子。最终结果:

http://jsfiddle.net/0oLyr3pz/

$('.close-link').on('click', function(){ $(this).parent().parent().remove(); });

另外,我注意到你的css看起来像这样

  

HTML,身体,股利,跨度,小应用程序,对象,iframe中,H1,H2,H3,H4,H5 ...

CSS selectors可以在这里帮到你。在您的情况下,您想使用星号(*)来选择所有内容。

答案 1 :(得分:0)

您只需向ConnectionSignUp.execute(Connection<?>) var添加onclick个事件即可删除closeLink

li

在此处查看您的更新小提琴:https://jsfiddle.net/rchmmkmd/4/